@neovici/cosmoz-omnitable 14.14.2 → 14.15.0

package/dist/lib/compute-layout.js

@@ -0,0 +1,46 @@
+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);
+//# sourceMappingURL=compute-layout.js.map

package/dist/lib/cosmoz-omnitable-amount-range-input.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cosmoz-omnitable-amount-range-input.d.ts.map

package/dist/lib/cosmoz-omnitable-amount-range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-omnitable-amount-range-input.d.ts","sourceRoot":"","sources":["../../src/lib/cosmoz-omnitable-amount-range-input.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,304 @@
+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);
+//# sourceMappingURL=cosmoz-omnitable-amount-range-input.js.map

package/dist/lib/cosmoz-omnitable-date-input-mixin.d.ts

@@ -0,0 +1,2 @@
+export function dateInputMixin(base: class): class;
+//# sourceMappingURL=cosmoz-omnitable-date-input-mixin.d.ts.map

package/dist/lib/cosmoz-omnitable-date-input-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-omnitable-date-input-mixin.d.ts","sourceRoot":"","sources":["../../src/lib/cosmoz-omnitable-date-input-mixin.js"],"names":[],"mappings":"AAUO,qCAHG,KAAK,GACH,KAAK,CA6Kf"}

package/dist/lib/cosmoz-omnitable-date-input-mixin.js

@@ -0,0 +1,149 @@
+import { toLocalISOString } from '@neovici/cosmoz-utils/date';
+import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
+/**
+* @polymer
+* @mixinFunction
+
+* @param {class} base The base class
+* @returns {class} The base class with the mixin applied
+*/
+export const dateInputMixin = (base) => 
+/**
+ * @polymer
+ * @mixinClass
+ */
+class extends rangeInputMixin(base) {
+    static get properties() {
+        return {
+            max: { type: Date, value: null },
+            min: { type: Date, value: null },
+            _filterText: {
+                type: String,
+                computed: '_computeFilterText(filter.*, formatter)',
+            },
+            formatter: { type: Object, computed: '_computeFormatter(locale)' },
+        };
+    }
+    /**
+     * Converts an value to date optionaly limiting it.
+     *
+     * @param	 {Date|String} value	 Value to convert to date
+     * @param	 {Date|String} limit	 Value used to limit the date
+     * @param	 {Function} limitFunc	 Function used to limit the date (Math.min|Math.max)
+     * @returns {Date|void} Value converted to date optionaly limitated
+     */
+    // eslint-disable-next-line max-statements
+    toDate(value, limit, limitFunc) {
+        if (value == null || value === '') {
+            return;
+        }
+        // convert value to Date
+        let date = value;
+        if (!(date instanceof Date)) {
+            // if the value is an ISO string, make sure that it has an explicit timezone
+            if (typeof value === 'string') {
+                date = this.getAbsoluteISOString(date);
+            }
+            date = new Date(date);
+        }
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        if (limitFunc == null || limit == null) {
+            return date;
+        }
+        const lDate = this.toDate(limit);
+        if (lDate == null) {
+            return date;
+        }
+        const comparableDate = this.getComparableValue(date), comparableLDate = this.getComparableValue(lDate), limitedValue = limitFunc(comparableDate, comparableLDate);
+        return limitedValue === comparableDate ? date : lDate;
+    }
+    toValue() {
+        return this.toDate.apply(this, arguments);
+    }
+    /**
+     * Get comparable number from date
+     *
+     * @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;
+        }
+        return this.toNumber(value.getTime());
+    }
+    /**
+     * Get date of item as string
+     *
+     * @param	 {Object} item											 Item to be processed
+     * @param	 {String} valuePath = this.valuePath Property path
+     * @param	 {Object} formatter = this.formatter Property formatter
+     * @returns {String}													 Date rendered as string or 'Invalid Date'
+     */
+    getString(item, valuePath = this.valuePath, formatter = this.formatter) {
+        const value = this.toValue(this.get(valuePath, item));
+        if (value === undefined) {
+            return '';
+        }
+        if (value === null) {
+            return 'Invalid Date';
+        }
+        return this.renderValue(value, formatter);
+    }
+    /**
+     * 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
+        // TODO: Consider removing this when/if Safari handles local timezone correctly
+        if (localISOString.length === 19) {
+            return localISOString + this._getTimezoneString(localISOString);
+        }
+        return localISOString;
+    }
+    /**
+     * Calculates the local timezone offset and formats it to ISO Timezone string.
+     * @param	 {String} localISOString an ISO date string
+     * @return {String}								 the ISO timezone
+     */
+    _getTimezoneString(localISOString) {
+        const off = -new Date(localISOString).getTimezoneOffset() / 60;
+        return ((off < 0 ? '-' : '+') + ['0', Math.abs(off)].join('').substr(-2) + ':00');
+    }
+    renderValue(value, formatter = this.formatter) {
+        if (formatter == null) {
+            return;
+        }
+        const date = this.toValue(value);
+        if (date == null) {
+            return;
+        }
+        return formatter.format(date);
+    }
+    _computeFormatter(locale) {
+        return new Intl.DateTimeFormat(locale || undefined);
+    }
+    _toInputString(value) {
+        const date = this.toValue(value);
+        if (date == null) {
+            return null;
+        }
+        return this._toLocalISOString(date).slice(0, 10);
+    }
+    _dateValueChanged(event) {
+        const input = event.currentTarget, value = input.value, item = event.model.item, 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));
+    }
+    _toLocalISOString(date) {
+        return toLocalISOString(date);
+    }
+};
+//# sourceMappingURL=cosmoz-omnitable-date-input-mixin.js.map

package/dist/lib/cosmoz-omnitable-date-range-input.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cosmoz-omnitable-date-range-input.d.ts.map

package/dist/lib/cosmoz-omnitable-date-range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-omnitable-date-range-input.d.ts","sourceRoot":"","sources":["../../src/lib/cosmoz-omnitable-date-range-input.js"],"names":[],"mappings":""}

package/{lib → dist/lib}/cosmoz-omnitable-date-range-input.js

@@ -5,12 +5,9 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import '@neovici/cosmoz-input';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
-
-class DateRangeInput extends dateInputMixin(
-	polymerHauntedRender(PolymerElement),
-) {
-	render() {
-		return html`
+class DateRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+    render() {
+        return html `
 			<style>
 				paper-dropdown-menu {
 					--iron-icon-width: 0;
@@ -71,9 +68,9 @@ class DateRangeInput extends dateInputMixin(
 				horizontal-align="right"
 				?opened=${this.headerFocused}
 				@opened-changed=${(event) => {
-					// TODO: check ots integration
-					this.headerFocused = event.detail.value;
-				}}
+            // TODO: check ots integration
+            this.headerFocused = event.detail.value;
+        }}
 			>
 				<div class="dropdown-content" slot="dropdown-content">
 					<h3 style="margin: 0;">${this.title}</h3>
@@ -83,8 +80,7 @@ class DateRangeInput extends dateInputMixin(
 						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)}
+						@value-changed=${(event) => this.set('_filterInput.min', event.detail.value)}
 					></cosmoz-input>
 					<cosmoz-input
 						type="date"
@@ -92,39 +88,34 @@ class DateRangeInput extends dateInputMixin(
 						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)}
+						@value-changed=${(event) => this.set('_filterInput.max', event.detail.value)}
 					></cosmoz-input>
 				</div>
 			</paper-dropdown-menu>
 		`;
-	}
-
-	_fromInputString(value, property) {
-		const date = this.toDate(value);
-		if (date == null) {
-			return;
-		}
-		if (property === 'min') {
-			date.setHours(0, 0, 0, 0);
-		}
-		if (property === 'max') {
-			date.setHours(23, 59, 59);
-		}
-		return date;
-	}
-
-	_filterInputChanged(change, autoupdate) {
-		const path = change.path.split('.')[1],
-			value = path && change.value;
-
-		// don't trigger change when date input begins with 0; Year (starting from 0000) was limited before the needed value was typed.
-		if (value && value.match(/^0+/u)) {
-			this._limitInputDebouncer.cancel();
-			return;
-		}
-		super._filterInputChanged(change, autoupdate);
-	}
+    }
+    _fromInputString(value, property) {
+        const date = this.toDate(value);
+        if (date == null) {
+            return;
+        }
+        if (property === 'min') {
+            date.setHours(0, 0, 0, 0);
+        }
+        if (property === 'max') {
+            date.setHours(23, 59, 59);
+        }
+        return date;
+    }
+    _filterInputChanged(change, autoupdate) {
+        const path = change.path.split('.')[1], value = path && change.value;
+        // don't trigger change when date input begins with 0; Year (starting from 0000) was limited before the needed value was typed.
+        if (value && value.match(/^0+/u)) {
+            this._limitInputDebouncer.cancel();
+            return;
+        }
+        super._filterInputChanged(change, autoupdate);
+    }
 }
-
 customElements.define('cosmoz-omnitable-date-range-input', DateRangeInput);
+//# sourceMappingURL=cosmoz-omnitable-date-range-input.js.map

package/dist/lib/cosmoz-omnitable-datetime-range-input.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cosmoz-omnitable-datetime-range-input.d.ts.map

package/dist/lib/cosmoz-omnitable-datetime-range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-omnitable-datetime-range-input.d.ts","sourceRoot":"","sources":["../../src/lib/cosmoz-omnitable-datetime-range-input.js"],"names":[],"mappings":""}