@neovici/cosmoz-omnitable 14.14.2 → 14.15.0

package/{ui-helpers → dist/ui-helpers}/cosmoz-clear-button.js

@@ -1,7 +1,6 @@
 import { tagged as css } from '@neovici/cosmoz-utils';
 import { html, component } from '@pionjs/pion';
-
-const styles = css`
+const styles = css `
 	:host {
 		display: flex;
 	}
@@ -47,8 +46,7 @@ const styles = css`
 		color: #dfdfdf;
 	}
 `;
-
-const Clear = () => html`
+const Clear = () => html `
 	<style>
 		${styles}
 	</style>
@@ -65,5 +63,5 @@ const Clear = () => html`
 		</g>
 	</svg>
 `;
-
 customElements.define('cosmoz-clear-button', component(Clear));
+//# sourceMappingURL=cosmoz-clear-button.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-omnitable",
-  "version": "14.14.2",
+  "version": "14.15.0",
   "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
   "keywords": [
     "web-components"
@@ -15,18 +15,41 @@
   },
   "license": "Apache-2.0",
   "author": "Neovici Development",
-  "main": "cosmoz-omnitable.js",
+  "main": "dist/cosmoz-omnitable.js",
+  "types": "dist/cosmoz-omnitable.d.ts",
+  "exports": {
+    "./cosmoz-omnitable.js": {
+      "types": "./dist/cosmoz-omnitable.d.ts",
+      "default": "./dist/cosmoz-omnitable.js"
+    },
+    "./cosmoz-omnitable-*.js": {
+      "types": "./dist/cosmoz-omnitable-*.d.ts",
+      "default": "./dist/cosmoz-omnitable-*.js"
+    },
+    "./lib/*.js": {
+      "types": "./dist/lib/*.d.ts",
+      "default": "./dist/lib/*.js"
+    },
+    "./grouped-list/*.js": {
+      "types": "./dist/grouped-list/*.d.ts",
+      "default": "./dist/grouped-list/*.js"
+    },
+    "./ui-helpers/*": {
+      "default": "./dist/ui-helpers/*"
+    }
+  },
   "directories": {
     "test": "test"
   },
   "files": [
-    "cosmoz-*.js",
-    "ui-helpers",
-    "lib/**/*.js",
-    "grouped-list/*.js"
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "dist/**/*.d.ts.map"
   ],
   "scripts": {
-    "lint": "eslint --cache --ext .js .",
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "lint": "eslint --cache --ext .js,.ts src/",
     "start": "wds",
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
@@ -59,6 +82,11 @@
         1,
         "always",
         600
+      ],
+      "footer-max-line-length": [
+        1,
+        "always",
+        600
       ]
     }
   },
@@ -72,7 +100,7 @@
     "@neovici/cosmoz-i18next": "^3.1.1",
     "@neovici/cosmoz-input": "^5.0.0",
     "@neovici/cosmoz-router": "^11.0.0",
-    "@neovici/cosmoz-spinner": "^1.0.0",
+    "@neovici/cosmoz-spinner": "^1.0.1",
     "@neovici/cosmoz-utils": "^6.14.2",
     "@neovici/nullxlsx": "^3.0.0",
     "@pionjs/pion": "^2.0.0",
@@ -97,9 +125,11 @@
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",
     "@storybook/web-components-vite": "^9.1.3",
+    "@types/file-saver": "^2.0.0",
     "husky": "^9.0.0",
     "semantic-release": "^24.0.0",
     "sinon": "^20.0.0",
-    "storybook": "^9.1.3"
+    "storybook": "^9.1.3",
+    "typescript": "^5.0.0"
   }
 }

package/cosmoz-omnitable-column-amount.js

@@ -1,162 +0,0 @@
-import '@neovici/cosmoz-input';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-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 { defaultComputeSource } from './lib/utils-data';
-import './lib/cosmoz-omnitable-amount-range-input';
-import {
-	getComparableValue,
-	getCurrency,
-	applySingleFilter,
-	getString,
-	getInputString,
-	toAmount,
-	toHashString,
-	fromHashString,
-} from './lib/utils-amount';
-import { get } from '@polymer/polymer/lib/utils/path';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnAmount extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			min: { type: Number, value: null, notify: true },
-			max: { type: Number, value: null, notify: true },
-			limits: { type: Function },
-			locale: { type: String, value: null, notify: true },
-			autoupdate: { type: Boolean, value: false, notify: true },
-			currency: { type: String, notify: true },
-			autodetect: { type: Boolean, value: false, notify: true },
-			rates: { type: Object, notify: true },
-			width: { type: String, value: '70px' },
-			cellClass: { type: String, value: 'amount-cell align-right' },
-			headerCellClass: { type: String, value: 'amount-header-cell' },
-		};
-	}
-
-	getConfig(column) {
-		return { limits: column.limits };
-	}
-
-	getFilterFn(column, filter) {
-		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
-			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	getString(column, item) {
-		return getString(column, item);
-	}
-
-	toXlsxValue(column, item) {
-		return getString(column, item);
-	}
-
-	cellTitleFn(column, item) {
-		return getString(column, item);
-	}
-
-	getComparableValue(column, item) {
-		return getComparableValue(column, item);
-	}
-
-	serializeFilter({ rates }, filter) {
-		if (filter == null) {
-			return;
-		}
-		const min = toAmount(rates, filter.min),
-			max = toAmount(rates, filter.max);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return toHashString(min) + '~' + toHashString(max);
-	}
-
-	deserializeFilter(column, filter) {
-		if (filter == null || filter === '') {
-			return null;
-		}
-		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
-
-		if (!Array.isArray(matches)) {
-			return null;
-		}
-
-		return { min: fromHashString(matches[1]), max: fromHashString(matches[2]) };
-	}
-
-	renderCell(column, { item }) {
-		return html`<span>${column.getString(column, item)}</span>`;
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const onChange = (event) =>
-			onItemChange({
-				amount: event.target.value,
-				currency: get(item, column.valuePath)?.currency,
-			});
-
-		return html`<cosmoz-input
-			no-label-float
-			type="number"
-			@change=${onChange}
-			.value=${getInputString(column, item)}
-		>
-			<div slot="suffix">${getCurrency(column, item)}</div>
-		</cosmoz-input>`;
-	}
-
-	renderHeader(
-		{
-			title,
-			min,
-			max,
-			limits,
-			locale,
-			rates,
-			currency,
-			autoupdate,
-			autodetect,
-		},
-		{ filter },
-		setState,
-		source,
-	) {
-		return html`<cosmoz-omnitable-amount-range-input
-			.title=${title}
-			.filter=${filter}
-			.values=${source}
-			.rates=${rates}
-			.min=${min}
-			.max=${max}
-			.limits=${limits}
-			.locale=${locale}
-			.currency=${currency}
-			.autoupdate=${autoupdate}
-			.autodetect=${autodetect}
-			@filter-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, filter: value }))}
-			@header-focused-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, headerFocused: value }))}
-		></cosmoz-omnitable-amount-range-input>`;
-	}
-
-	computeSource(column, data) {
-		return defaultComputeSource(column, data);
-	}
-}
-
-customElements.define('cosmoz-omnitable-column-amount', OmnitableColumnAmount);

package/cosmoz-omnitable-column-autocomplete.js

@@ -1,113 +0,0 @@
-import '@neovici/cosmoz-autocomplete';
-
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { html } from 'lit-html';
-import { when } from 'lit-html/directives/when.js';
-import '@neovici/cosmoz-spinner';
-
-import { columnMixin, getString } from './cosmoz-omnitable-column-mixin.js';
-import {
-	listColumnMixin,
-	onChange,
-	onFocus,
-	onText,
-} from './cosmoz-omnitable-column-list-mixin';
-import { prop, strProp } from '@neovici/cosmoz-utils/object';
-import { array } from '@neovici/cosmoz-utils/array';
-
-import { columnSymbol } from './lib/use-dom-columns';
-import { get } from '@polymer/polymer/lib/utils/path';
-
-export const getComparableValue = (
-	{ valuePath, textProperty, valueProperty },
-	item,
-) => {
-	const property = textProperty ? strProp(textProperty) : prop(valueProperty),
-		values = array(valuePath && get(item, valuePath)).map(property);
-	return values.length > 1 ? values.filter(Boolean).join(',') : values[0];
-};
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnAutocomplete extends listColumnMixin(
-	columnMixin(PolymerElement),
-) {
-	static get properties() {
-		return {
-			headerCellClass: { type: String, value: 'autocomplete-header-cell' },
-			minWidth: { type: String, value: '55px' },
-			editMinWidth: { type: String, value: '55px' },
-			keepOpened: { type: Boolean, value: true },
-			keepQuery: { type: Boolean },
-			showSingle: { type: Boolean },
-			preserveOrder: { type: Boolean },
-			limit: { type: Number },
-			textual: { type: Function },
-		};
-	}
-
-	getConfig(column) {
-		return {
-			...super.getConfig?.(column),
-			keepOpened: column.keepOpened,
-			keepQuery: column.keepQuery,
-			showSingle: column.showSingle,
-			preserveOrder: column.preserveOrder,
-			limit: column.limit,
-			textual: column.textual,
-		};
-	}
-
-	renderCell(column, { item }) {
-		return html`<span class="default-column"
-			>${column.getString(column, item)}</span
-		>`;
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const onChange = (event) => onItemChange(event.target.value);
-		return html`<cosmoz-input
-			no-label-float
-			type="text"
-			@change=${onChange}
-			.value=${getString(column, item)}
-		></cosmoz-input>`;
-	}
-
-	renderHeader(column, { filter, query }, setState, source) {
-		return html`<cosmoz-autocomplete-ui
-			class="external-values-${column.externalValues}"
-			?keep-opened=${column.keepOpened}
-			?keep-query=${column.keepQuery}
-			?show-single=${column.showSingle}
-			?preserve-order=${column.preserveOrder}
-			.textual=${column.textual}
-			.label=${column.title}
-			.source=${source}
-			.textProperty=${column.textProperty}
-			.valueProperty=${column.valueProperty}
-			.itemRenderer=${column[columnSymbol]?.itemRenderer}
-			.value=${filter}
-			.text=${query}
-			.limit=${column.limit}
-			.onChange=${onChange(setState)}
-			.onFocus=${onFocus(setState)}
-			.onText=${onText(setState)}
-			>${when(
-				column.loading,
-				() => html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
-			)}</cosmoz-autocomplete-ui
-		>`;
-	}
-
-	getComparableValue(column, item) {
-		return getComparableValue(column, item);
-	}
-}
-customElements.define(
-	'cosmoz-omnitable-column-autocomplete',
-	OmnitableColumnAutocomplete,
-);

package/cosmoz-omnitable-column-boolean.js

@@ -1,168 +0,0 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-
-import { columnMixin } from './cosmoz-omnitable-column-mixin';
-
-import '@neovici/cosmoz-autocomplete';
-import { html } from 'lit-html';
-import { when } from 'lit-html/directives/when.js';
-import { get } from '@polymer/polymer/lib/utils/path';
-import { memooize } from '@neovici/cosmoz-utils/memoize';
-
-const computeValue = (value, source) =>
-		source.find(({ value: valueProp }) => value === valueProp),
-	computeTooltip = (title, value, source) => {
-		const val = computeValue(value, source);
-		return val ? val.text : title;
-	},
-	computeItemTooltip = (title, item, valuePath, source) =>
-		computeTooltip(title, get(item, valuePath), source),
-	computeItemValue = ({ valuePath }, item, source) =>
-		computeValue(get(item, valuePath), source),
-	onChange = (setState) => (selection) => {
-		setState((state) => ({ ...state, filter: selection?.[0]?.value ?? null }));
-	},
-	onFocus = (setState) => (focused) => {
-		setState((state) => ({ ...state, headerFocused: focused }));
-	},
-	onText = (setState) => (text) => {
-		setState((state) => ({ ...state, query: text }));
-	},
-	onEditableChange = (onItemChange) => (selection) =>
-		onItemChange(selection?.[0]?.value),
-	getString = ({ valuePath, trueLabel, falseLabel }, item) => {
-		const value = get(item, valuePath);
-		return value ? trueLabel : falseLabel;
-	},
-	applySingleFilter =
-		({ valuePath }, filter) =>
-		(item) =>
-			get(item, valuePath) === filter,
-	computeSource = memooize((trueLabel, falseLabel) => [
-		{ text: trueLabel, value: true },
-		{ text: falseLabel, value: false },
-	]),
-	toXlsxValue = ({ valuePath, trueLabel, falseLabel }, item) => {
-		if (!valuePath) {
-			return '';
-		}
-		return get(item, valuePath) ? trueLabel : falseLabel;
-	},
-	deserializeFilter = (column, filter) => {
-		try {
-			return JSON.parse(filter);
-		} catch {
-			return null;
-		}
-	};
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin columnMixin
- */
-class OmnitableColumnBoolean extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			trueLabel: { type: String, value: 'True' },
-			falseLabel: { type: String, value: 'False' },
-			flex: { type: String, value: '0' },
-			cellClass: { type: String, value: 'boolean-cell' },
-		};
-	}
-
-	getString(column, item) {
-		return getString(column, item);
-	}
-
-	renderCell(column, { item }) {
-		return getString(column, item);
-	}
-
-	cellTitleFn(column, item) {
-		return getString(column, item);
-	}
-
-	renderEditCell(column, { item }, onItemChange) {
-		const { trueLabel, falseLabel } = column;
-
-		return html`<cosmoz-autocomplete
-			no-label-float
-			.title=${computeItemTooltip(
-				column.title,
-				item,
-				column.valuePath,
-				computeSource(trueLabel, falseLabel),
-			)}
-			.source=${computeSource(trueLabel, falseLabel)}
-			.textProperty=${'text'}
-			.value=${computeItemValue(
-				column,
-				item,
-				computeSource(trueLabel, falseLabel),
-			)}
-			.onChange=${onEditableChange(onItemChange)}
-			.limit=${1}
-			>${when(
-				column.loading,
-				() =>
-					html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
-			)}</cosmoz-autocomplete
-		>`;
-	}
-
-	renderHeader(column, { filter, query }, setState, source) {
-		return html`<cosmoz-autocomplete-ui
-			.label=${column.title}
-			.title=${computeItemTooltip(
-				column.title,
-				filter,
-				column.valuePath,
-				source,
-			)}
-			.source=${source}
-			.textProperty=${'text'}
-			.value=${computeValue(filter, source)}
-			.text=${query}
-			.onChange=${onChange(setState)}
-			.onFocus=${onFocus(setState)}
-			.onText=${onText(setState)}
-			.limit=${1}
-			>${when(
-				column.loading,
-				() => html`<cosmoz-spinner slot="suffix"></cosmoz-spinner>`,
-			)}</cosmoz-autocomplete-ui
-		>`;
-	}
-
-	computeSource({ trueLabel, falseLabel }) {
-		return computeSource(trueLabel, falseLabel);
-	}
-
-	getFilterFn(column, filter) {
-		if (filter == null) {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	toXlsxValue(column, item) {
-		return toXlsxValue(column, item);
-	}
-
-	deserializeFilter(column, filter) {
-		return deserializeFilter(column, filter);
-	}
-}
-customElements.define(
-	'cosmoz-omnitable-column-boolean',
-	OmnitableColumnBoolean,
-);
-
-export {
-	getString,
-	computeItemValue,
-	computeSource,
-	toXlsxValue,
-	onChange,
-	deserializeFilter,
-};

package/cosmoz-omnitable-column-date.js

@@ -1,133 +0,0 @@
-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 { columnMixin } from './cosmoz-omnitable-column-mixin';
-import './lib/cosmoz-omnitable-date-range-input';
-import { defaultComputeSource } from './lib/utils-data';
-import {
-	getString,
-	getComparableValue,
-	toDate,
-	toHashString,
-	toXlsxValue,
-	applySingleFilter,
-	getInputString,
-	fromInputString,
-} from './lib/utils-date';
-
-class OmnitableColumnDate extends columnMixin(PolymerElement) {
-	static get properties() {
-		return {
-			min: { type: Number, value: null, notify: true },
-			max: { type: Number, value: null, notify: true },
-			limits: { type: Function },
-			locale: { type: String, value: null, notify: true },
-			headerCellClass: { type: String, value: 'date-header-cell' },
-			width: { type: String, value: '100px' },
-			minWidth: { type: String, value: '82px' },
-			flex: { type: String, value: '0' },
-		};
-	}
-
-	getConfig(column) {
-		return { limits: column.limits };
-	}
-
-	getFilterFn(column, filter) {
-		const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
-			max = getComparableValue({ ...column, valuePath: 'max' }, filter);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return applySingleFilter(column, filter);
-	}
-
-	getString(column, item) {
-		return getString(column, item);
-	}
-
-	toXlsxValue(column, item) {
-		return toXlsxValue(column, item);
-	}
-
-	cellTitleFn(column, item) {
-		return getString(column, item);
-	}
-
-	getComparableValue(column, item) {
-		return getComparableValue(column, item);
-	}
-
-	serializeFilter(column, filter) {
-		if (filter == null) {
-			return;
-		}
-		const min = toDate(filter.min),
-			max = toDate(filter.max);
-
-		if (min == null && max == null) {
-			return;
-		}
-		return toHashString(min) + '~' + toHashString(max);
-	}
-
-	deserializeFilter(column, filter) {
-		if (filter == null || filter === '') {
-			return null;
-		}
-		const matches = filter.match(/^([^~]+)?~([^~]+)?/iu);
-
-		if (!Array.isArray(matches)) {
-			return null;
-		}
-
-		return { min: toDate(matches[1]), max: toDate(matches[2]) };
-	}
-
-	renderCell(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"
-			@change=${onChange}
-			.value=${getInputString(column, item)}
-		></cosmoz-input>`;
-	}
-
-	renderHeader(
-		{ title, min, max, limits, locale },
-		{ filter },
-		setState,
-		source,
-	) {
-		return html`<cosmoz-omnitable-date-range-input
-			.title=${title}
-			.filter=${filter}
-			.values=${source}
-			.min=${min}
-			.max=${max}
-			.limits=${limits}
-			.locale=${locale}
-			@filter-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, filter: value }))}
-			@header-focused-changed=${({ detail: { value } }) =>
-				setState((state) => ({ ...state, headerFocused: value }))}
-		></cosmoz-omnitable-date-range-input>`;
-	}
-
-	computeSource(column, data) {
-		return defaultComputeSource(column, data);
-	}
-}
-customElements.define('cosmoz-omnitable-column-date', OmnitableColumnDate);