@neovici/cosmoz-omnitable 14.14.3 → 14.15.1

package/grouped-list/use-selected-items.js

@@ -1,140 +0,0 @@
-import { useCallback, useEffect, useState } from '@pionjs/pion';
-import { isGroup } from './utils';
-
-export const useSelectedItems = ({
-	initial,
-	compareItemsFn,
-	data,
-	flatData,
-}) => {
-	const [selectedItems, setSelectedItems] = useState(initial),
-		[lastSelection, setLastSelection] = useState(),
-		/**
-		 * Check if item is selected.
-		 * @param {object} item Item.
-		 * @returns {boolean} Whether item is selected.
-		 */
-		isItemSelected = useCallback(
-			(item) => selectedItems.includes(item),
-			[selectedItems],
-		),
-		/**
-		 * Check if group is selected.
-		 * @param {object} group Group.
-		 * @returns {boolean} Whether group is selected.
-		 */
-		isGroupSelected = useCallback(
-			(group) => group?.items?.every(isItemSelected),
-			[isItemSelected],
-		),
-		/**
-		 * Check if item.group is selected.
-		 * @param {object} item Item.
-		 * @returns {boolean} Whether item is selected.
-		 */
-		isSelected = useCallback(
-			(item) => isItemSelected(item) || isGroupSelected(item),
-			[isItemSelected, isGroupSelected],
-		),
-		/**
-		 * Add an item/group to the list of selected items.
-		 * @param {object} item Item to select.
-		 * @returns {void}
-		 */
-		select = useCallback((item) => {
-			const items = item.items ?? [item];
-			setSelectedItems((selection) => [
-				...selection,
-				...items.filter((i) => !selection.includes(i)),
-			]);
-			setLastSelection(item);
-		}, []),
-		/**
-		 * Removes an item/group from the list of selected items.
-		 * @param {object} item Item to select.
-		 * @returns {void}
-		 */
-		deselect = useCallback((item) => {
-			const items = item.items ?? [item];
-			setSelectedItems((selection) =>
-				selection.filter((i) => !items.includes(i)),
-			);
-			setLastSelection(item);
-		}, []),
-		selectOnly = useCallback((item) => {
-			setSelectedItems(item.items?.slice() || [item]);
-			setLastSelection(item);
-		}, []),
-		/**
-		 * Select all items.
-		 * @returns {void}
-		 */
-		selectAll = useCallback(() => {
-			setSelectedItems(data.flatMap((item) => item.items || item));
-			setLastSelection(undefined);
-		}, [data]),
-		/**
-		 * Deselect all selected items.
-		 * @returns {void}
-		 */
-		deselectAll = useCallback(() => {
-			setSelectedItems([]);
-			setLastSelection(undefined);
-		}, []),
-		/**
-		 * Toggles the selection of an item/group.
-		 * @param {object} item Item to select.
-		 * @param {boolean=} selected Select or deselect, fallback to toggling.
-		 * @returns {void}
-		 */
-		toggleSelect = useCallback(
-			(item, selected = !isSelected(item)) =>
-				selected ? select(item) : deselect(item),
-			[isSelected],
-		),
-		toggleSelectTo = useCallback(
-			(item, selected) => {
-				const last = lastSelection
-					? flatData.findIndex((i) => compareItemsFn(i, lastSelection))
-					: -1;
-				if (last < 0) {
-					return toggleSelect(item, selected);
-				}
-				const [from, to] = [last, flatData.indexOf(item)].sort((a, b) => a - b);
-				flatData.slice(from, to + 1).forEach((item, i, items) => {
-					if (i > 0 && i < items.length - 1 && isGroup(item)) {
-						return;
-					}
-					toggleSelect(item, selected);
-				});
-				setLastSelection(item);
-			},
-			[flatData, compareItemsFn, toggleSelect],
-		);
-
-	// keep selected items across data updates
-	useEffect(
-		() =>
-			setSelectedItems((selectedItems) =>
-				selectedItems.length > 0
-					? flatData.filter((i) =>
-							selectedItems.find((item) => compareItemsFn(i, item)),
-						)
-					: selectedItems,
-			),
-		[flatData],
-	);
-	return {
-		selectedItems,
-		isItemSelected,
-		isGroupSelected,
-		isSelected,
-		select,
-		deselect,
-		selectOnly,
-		selectAll,
-		deselectAll,
-		toggleSelect,
-		toggleSelectTo,
-	};
-};

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

@@ -1,21 +0,0 @@
-import { useCallback, useState } from '@pionjs/pion';
-import { callFn, getItemState } from './utils';
-
-export const useWeakState = () => {
-	const [wrapper, setState] = useState(() => [new WeakMap()]),
-		setItemState = useCallback(
-			(item, newItemState) =>
-				setState(([state]) => {
-					const itemState = getItemState(item, state);
-					Object.assign(itemState, callFn(newItemState, itemState));
-					return [state];
-				}),
-			[],
-		);
-
-	return {
-		setItemState,
-		state: wrapper[0],
-		signal: wrapper,
-	};
-};

package/grouped-list/utils.js

@@ -1,89 +0,0 @@
-const symbols = {
-		group: Symbol('group'),
-	},
-	getItemState = (item, itemsState) => {
-		if (!itemsState.has(item)) {
-			itemsState.set(item, {});
-		}
-
-		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),
-	/**
-	 * Asserts that data is either all items or all groups, never mixed.
-	 * @param	 {Array} data the data
-	 * @return {void}
-	 */
-	_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,
-			);
-
-		if (!isHomogeneous) {
-			throw new Error('Data must be homogeneous.');
-		}
-	},
-	/**
-	 * Prepare data.
-	 * @param {array} data Data.
-	 * @param {boolean} displayEmptyGroups Flag.
-	 * @param {WeakMap} itemsState State.
-	 * @returns {void|array} Prepared data.
-	 */
-	prepareData = (data, displayEmptyGroups, itemsState) => {
-		if (!Array.isArray(data)) {
-			return;
-		}
-
-		// data should be either all items or all grouped items, never mixed
-		_assertDataIsHomogeneous(data);
-
-		const flatData = data.reduce((acc, item) => {
-			// simple items
-			if (!item.items) {
-				return acc.concat(item);
-			}
-
-			// groups with items
-			if (item.items.length) {
-				if (getItemState(item, itemsState).folded) {
-					return acc.concat(item);
-				}
-				return acc.concat(
-					item,
-					item.items.map((i) => Object.assign(i, { [symbols.group]: item })),
-				);
-			}
-
-			// groups without items
-			if (displayEmptyGroups) {
-				return acc.concat(item);
-			}
-
-			return acc;
-		}, []);
-
-		return flatData;
-	},
-	callFn = (fn, ...args) => (typeof fn === 'function' ? fn(...args) : fn),
-	byReference = (a, b) => a === b;
-
-export {
-	symbols,
-	prepareData,
-	getItemState,
-	isExpanded,
-	isFolded,
-	isGroup,
-	callFn,
-	byReference,
-};

package/lib/compute-layout.js

@@ -1,74 +0,0 @@
-import { layout } from './layout';
-import { findLastIndex } from './utils';
-
-const _toCss = (layout, config) => {
-	const lastVisibleIndex = findLastIndex(
-			layout,
-			(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 hideColumn(item.name);
-			}
-
-			// All visible columns
-			const cellCSS = generateCellCSS(item.name, width);
-
-			// Last visible column, show cell but hide its resize nub
-			if (index === lastVisibleIndex) {
-				return `${cellCSS}\n${hideResizeNub(item.name)}`;
-			}
-
-			// Other visible columns just show the cell
-			return cellCSS;
-		})
-		.join('\n');
-};
-
-export const computeLayout = (_columnConfigs, canvasWidth, numColumns) => {
-		const columnConfigs = _columnConfigs.filter((c) => !c.hidden),
-			totalWidths = columnConfigs.reduce((sum, { width }) => sum + width, 0);
-
-		if (columnConfigs.length > 1 && totalWidths > canvasWidth) {
-			// drop a column
-			return computeLayout(columnConfigs.slice(1), canvasWidth, numColumns);
-		}
-
-		// calculate the index of the last visible column, the one that needs to flex,
-		// as the column configs might now be in a different order than displayed
-		// due to priority settings
-		const lastColumnIndex = columnConfigs.reduce(
-			([max, maxIndex], column, index) => [
-				Math.max(max, column.index),
-				column.index > max ? index : maxIndex,
-			],
-			[-1, -1],
-		)[1];
-
-		// force the last visible column to flex
-		if (lastColumnIndex !== -1) {
-			columnConfigs[lastColumnIndex].flex = 1;
-		}
-
-		const widths = layout(columnConfigs, canvasWidth);
-
-		return widths.reduce((sorted, width, i) => {
-			sorted[columnConfigs[i].index] = width;
-			return sorted;
-		}, new Array(numColumns).fill(undefined));
-	},
-	toCss = (layout, config) =>
-		layout.length === 0 ? '.cell {display: none;}' : _toCss(layout, config);

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

@@ -1,353 +0,0 @@
-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 '@neovici/cosmoz-input';
-import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
-import { polymerHauntedRender } from './polymer-haunted-render-mixin';
-
-class AmountRangeInput extends rangeInputMixin(
-	polymerHauntedRender(PolymerElement),
-) {
-	static get properties() {
-		return {
-			/**
-			 * Base Currency used in filters
-			 */
-			currency: { type: String },
-
-			/**
-			 * If this is set true then currency property will be the currency with highest occurrence in values
-			 */
-			autodetect: { type: Boolean, value: false },
-
-			/**
-			 * Exchange rates of currencies. Example: {"EUR": 1, "USD":0.8169982616, "AUD":0.6529827192, "SEK": 0.1019271438}'
-			 * Default exchange rate is 1 and it is used for every currency that is present on column values but missing from exchange rates object.
-			 */
-			rates: { type: Object },
-			// trigger filter updates manually
-			autoupdate: { type: String, value: false },
-			_filterText: {
-				type: String,
-				computed: '_computeFilterText(filter.*, _formatters)',
-			},
-		};
-	}
-
-	static get observers() {
-		return ['_valuesChanged(autodetect, currency, values)'];
-	}
-
-	render() {
-		const onOpenedChanged = (event) => {
-			this.headerFocused = event.detail.value;
-			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>
-		`;
-	}
-
-	/**
-	 * Auto-detect currency property: Most frequently occurring currency
-	 * @param {boolean} autodetect Whether the currency property will be the currency with highest occurrence in values or not.
-	 * @param {string} currency Base currency used in filters.
-	 * @param {Array} values Array of amounts
-	 * @returns {void}
-	 */
-	_valuesChanged(autodetect, currency, values) {
-		if (!Array.isArray(values) || values.length < 1) {
-			return;
-		}
-		if (!autodetect && currency) {
-			return;
-		}
-		// array with currencies as keys and occurence as value
-		const currencies = values.reduce((p, n) => {
-			if (n.currency) {
-				const c = n.currency;
-				p[c] = (p[c] || 0) + 1;
-			}
-			return p;
-		}, {});
-
-		let key = Object.keys(currencies)[0];
-		Object.keys(currencies).reduce((p, n) => {
-			const max = Math.max(p, currencies[n]);
-			if (max === currencies[n]) {
-				key = n;
-			}
-			return max;
-		}, 0);
-		this.set('currency', key);
-	}
-
-	/**
-	 * Converts a value to an amount object optionaly limiting it.
-	 *
-	 * @param {Object} value The value to convert to number
-	 * @param {Object} limit The value used to limit the number
-	 * @param {Function} limitFunc The function used to limit the number (Math.min|Math.max)
-	 * @returns {Object|void} Value converted to Number or void
-	 */
-	toAmount(value, limit, limitFunc) {
-		if (value == null || value === '') {
-			return;
-		}
-
-		if (
-			typeof value !== 'object' ||
-			value.currency == null ||
-			value.currency === ''
-		) {
-			return null;
-		}
-
-		const number = this.toNumber(value.amount);
-		if (number == null || Number.isNaN(number)) {
-			return null;
-		}
-		const amount = { currency: value.currency, amount: number };
-
-		if (limitFunc == null || limit == null) {
-			return amount;
-		}
-		const lAmount = this.toAmount(limit);
-		if (lAmount == null) {
-			return amount;
-		}
-
-		// calculate value and limit amounts with rates
-		const rates = this.rates || {},
-			valAmount = amount.amount * (rates[amount.currency] || 1),
-			limAmount = lAmount.amount * (rates[lAmount.currency] || 1),
-			lNumber = this.toNumber(valAmount, limAmount, limitFunc);
-		return lNumber === valAmount ? amount : lAmount;
-	}
-
-	toValue() {
-		return this.toAmount.apply(this, arguments);
-	}
-
-	/**
-	 * Get the comparable value of an item.
-	 *
-	 * @param {Object} item Item to be processed
-	 * @param {String} valuePath Property path
-	 * @returns {Number|void} Valid value or void
-	 */
-	getComparableValue(item, valuePath) {
-		const value = super.getComparableValue(item, valuePath);
-
-		if (value == null) {
-			return;
-		}
-		const amount = this.toNumber(value.amount),
-			rates = this.rates;
-
-		if (rates == null) {
-			return amount;
-		}
-
-		return amount * (rates[value.currency] || 1);
-	}
-	getString(item, valuePath = this.valuePath) {
-		const value = this.toValue(this.get(valuePath, item));
-		if (value === undefined) {
-			return '';
-		}
-		if (value === null) {
-			return 'Invalid value';
-		}
-		return this.renderValue(value);
-	}
-
-	getCurrency(item, valuePath) {
-		const value = this.get(valuePath, item);
-		return value && value.currency;
-	}
-
-	getFormatter(currency, locale) {
-		const id = locale ? locale : '',
-			key = currency + id || '',
-			formatters = (this._formatters = this._formatters || {});
-		if (formatters[key]) {
-			return formatters[key];
-		}
-
-		formatters[key] = new Intl.NumberFormat(locale || undefined, {
-			style: 'currency',
-			currency,
-		});
-
-		return formatters[key];
-	}
-	/**
-	 * Converts an amount to symbol and value to be rendered.
-	 *
-	 * @param {Object} value Amount to be formated
-	 * @param {Object} _formatters = this._formatters All possible formatters.
-	 * @returns {String} Formated value or empty string.
-	 */
-	renderValue(value) {
-		const amount = this.toAmount(value);
-		if (amount == null) {
-			return '';
-		}
-		return this.getFormatter(amount.currency, this.locale).format(value.amount);
-	}
-
-	_amountValueChanged(event) {
-		const input = event.target,
-			value = input.value,
-			item = event.model.item,
-			originalValue = this.get(this.valuePath, item),
-			amountValue = Number(value),
-			newValue = { amount: amountValue, currency: originalValue.currency };
-
-		this.set(this.valuePath, newValue, item);
-		this._fireItemChangeEvent(
-			item,
-			this.valuePath,
-			originalValue,
-			this.renderValue.bind(this),
-		);
-	}
-
-	_toInputString(value) {
-		const amount = this.toValue(value);
-		if (amount == null) {
-			return null; //Need null to clear input
-		}
-		return this.toNumber(amount.amount);
-	}
-
-	_toInputStringAmount(value) {
-		const rates = this.rates;
-		if (rates == null) {
-			return this._toInputString(value);
-		}
-		const amount = this.toValue(value);
-		if (amount == null) {
-			return null;
-		}
-		const toCurrency =
-			(this.toNumber(amount.amount) * (rates[amount.currency] || 1)) /
-			(rates[this.currency] || 1);
-		return toCurrency.toFixed(2);
-	}
-
-	_fromInputString(value, property) {
-		const number = this.toNumber(value);
-		if (number == null) {
-			return;
-		}
-		return this.toValue({
-			amount: number,
-			currency:
-				(property && this.get(['filter', property, 'currency'])) ||
-				this.currency,
-		});
-	}
-}
-
-customElements.define('cosmoz-omnitable-amount-range-input', AmountRangeInput);