@neovici/cosmoz-omnitable 14.14.3 → 14.15.1

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

@@ -4,12 +4,9 @@ import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { dateInputMixin } from './cosmoz-omnitable-date-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
-
-class DatetimeRangeInput extends dateInputMixin(
-	polymerHauntedRender(PolymerElement),
-) {
-	render() {
-		return html`
+class DatetimeRangeInput extends dateInputMixin(polymerHauntedRender(PolymerElement)) {
+    render() {
+        return html `
 			<style>
 				paper-dropdown-menu {
 					--iron-icon-width: 0;
@@ -71,8 +68,7 @@ class DatetimeRangeInput extends dateInputMixin(
 				title=${this._tooltip}
 				horizontal-align="right"
 				?opened=${this.headerFocused}
-				@opened-changed=${(event) =>
-					this.set('headerFocused', event.detail.value)}
+				@opened-changed=${(event) => this.set('headerFocused', event.detail.value)}
 			>
 				<div class="dropdown-content" slot="dropdown-content">
 					<h3 style="margin: 0;">${this.title}</h3>
@@ -83,8 +79,7 @@ class DatetimeRangeInput extends dateInputMixin(
 						max=${this._toInputString(this._limit.fromMax)}
 						step=${this.filterStep}
 						.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-datetime-input>
 					<cosmoz-datetime-input
 						date-label=${_('To date')}
@@ -93,36 +88,30 @@ class DatetimeRangeInput extends dateInputMixin(
 						max=${this._toInputString(this._limit.toMax)}
 						step=${this.filterStep}
 						.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-datetime-input>
 				</div>
 			</paper-dropdown-menu>
 		`;
-	}
-
-	_toInputString(value) {
-		const date = this.toValue(value);
-		if (date == null) {
-			return;
-		}
-		return this._toLocalISOString(date).slice(0, 19);
-	}
-
-	// OVERRIDES
-	_computeFormatter(locale) {
-		const timeFormatOption = {
-			year: 'numeric',
-			month: 'numeric',
-			day: 'numeric',
-			hour: 'numeric',
-			minute: 'numeric',
-		};
-		return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
-	}
+    }
+    _toInputString(value) {
+        const date = this.toValue(value);
+        if (date == null) {
+            return;
+        }
+        return this._toLocalISOString(date).slice(0, 19);
+    }
+    // OVERRIDES
+    _computeFormatter(locale) {
+        const timeFormatOption = {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        return new Intl.DateTimeFormat(locale || undefined, timeFormatOption);
+    }
 }
-
-customElements.define(
-	'cosmoz-omnitable-datetime-range-input',
-	DatetimeRangeInput,
-);
+customElements.define('cosmoz-omnitable-datetime-range-input', DatetimeRangeInput);
+//# sourceMappingURL=cosmoz-omnitable-datetime-range-input.js.map

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

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

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

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

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

@@ -5,35 +5,29 @@ import { _ } from '@neovici/cosmoz-i18next';
 import '@neovici/cosmoz-input';
 import { rangeInputMixin } from './cosmoz-omnitable-range-input-mixin';
 import { polymerHauntedRender } from './polymer-haunted-render-mixin';
-
-class NumberRangeInput extends rangeInputMixin(
-	polymerHauntedRender(PolymerElement),
-) {
-	static get properties() {
-		return {
-			maximumFractionDigits: { type: Number, value: null },
-			minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
-			formatter: {
-				type: Object,
-				computed:
-					'_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)',
-			},
-			// trigger filter updates manually
-			autoupdate: { type: String, value: false },
-			_filterText: {
-				type: String,
-				computed: '_computeFilterText(filter.*, formatter)',
-			},
-		};
-	}
-
-	render() {
-		const onOpenedChanged = (event) => {
-			this.headerFocused = event.detail.value;
-			this._onDropdownOpenedChanged(event);
-		};
-
-		return html`
+class NumberRangeInput extends rangeInputMixin(polymerHauntedRender(PolymerElement)) {
+    static get properties() {
+        return {
+            maximumFractionDigits: { type: Number, value: null },
+            minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
+            formatter: {
+                type: Object,
+                computed: '_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits)',
+            },
+            // trigger filter updates manually
+            autoupdate: { type: String, value: false },
+            _filterText: {
+                type: String,
+                computed: '_computeFilterText(filter.*, formatter)',
+            },
+        };
+    }
+    render() {
+        const onOpenedChanged = (event) => {
+            this.headerFocused = event.detail.value;
+            this._onDropdownOpenedChanged(event);
+        };
+        return html `
 			<style>
 				paper-dropdown-menu {
 					--iron-icon-width: 0;
@@ -105,8 +99,8 @@ class NumberRangeInput extends rangeInputMixin(
 						label=${_('From')}
 						.value=${this._filterInput?.min}
 						@value-changed=${(event) => {
-							this.set('_filterInput.min', event.detail.value);
-						}}
+            this.set('_filterInput.min', event.detail.value);
+        }}
 						@blur=${(event) => this._onBlur(event)}
 						@keydown=${(event) => this._onKeyDown(event)}
 						min=${this._toInputString(this._limit.fromMin)}
@@ -118,8 +112,8 @@ class NumberRangeInput extends rangeInputMixin(
 						label=${_('To')}
 						.value=${this._filterInput?.max}
 						@value-changed=${(event) => {
-							this.set('_filterInput.max', event.detail.value);
-						}}
+            this.set('_filterInput.max', event.detail.value);
+        }}
 						@blur=${(event) => this._onBlur(event)}
 						@keydown=${(event) => this._onKeyDown(event)}
 						min=${this._toInputString(this._limit.toMin)}
@@ -128,55 +122,51 @@ class NumberRangeInput extends rangeInputMixin(
 				</div>
 			</paper-dropdown-menu>
 		`;
-	}
-
-	_computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
-		const options = {
-			localeMatcher: 'best fit', // chrome expects this when using custom options
-		};
-		if (minimumFractionDigits !== null) {
-			options.minimumFractionDigits = minimumFractionDigits;
-		}
-		if (maximumFractionDigits !== null) {
-			options.maximumFractionDigits = maximumFractionDigits;
-		}
-		return new Intl.NumberFormat(locale || undefined, options);
-	}
-
-	/**
-	 *	 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) {
-		if (item == null) {
-			return;
-		}
-		let value = item;
-		if (valuePath != null) {
-			value = this.get(valuePath, item);
-		}
-		value = this.toValue(value);
-		if (value == null) {
-			return;
-		}
-
-		const decimals = this.maximumFractionDigits;
-		if (decimals !== null) {
-			return this.toValue(value.toFixed(decimals));
-		}
-		return value;
-	}
-
-	renderValue(value, formatter = this.formatter) {
-		const number = this.toNumber(value);
-		if (number == null) {
-			return;
-		}
-		return formatter.format(number);
-	}
+    }
+    _computeFormatter(locale, minimumFractionDigits, maximumFractionDigits) {
+        const options = {
+            localeMatcher: 'best fit', // chrome expects this when using custom options
+        };
+        if (minimumFractionDigits !== null) {
+            options.minimumFractionDigits = minimumFractionDigits;
+        }
+        if (maximumFractionDigits !== null) {
+            options.maximumFractionDigits = maximumFractionDigits;
+        }
+        return new Intl.NumberFormat(locale || undefined, options);
+    }
+    /**
+     *	 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) {
+        if (item == null) {
+            return;
+        }
+        let value = item;
+        if (valuePath != null) {
+            value = this.get(valuePath, item);
+        }
+        value = this.toValue(value);
+        if (value == null) {
+            return;
+        }
+        const decimals = this.maximumFractionDigits;
+        if (decimals !== null) {
+            return this.toValue(value.toFixed(decimals));
+        }
+        return value;
+    }
+    renderValue(value, formatter = this.formatter) {
+        const number = this.toNumber(value);
+        if (number == null) {
+            return;
+        }
+        return formatter.format(number);
+    }
 }
-
 customElements.define('cosmoz-omnitable-number-range-input', NumberRangeInput);
+//# sourceMappingURL=cosmoz-omnitable-number-range-input.js.map

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

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

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

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

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

@@ -0,0 +1,337 @@
+import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
+import { timeOut } from '@polymer/polymer/lib/utils/async.js';
+import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';
+import { invoke } from '@neovici/cosmoz-utils/function';
+const getCloseableParent = (el) => typeof el.close === 'function' ? el : getCloseableParent(el.parentElement);
+/**
+ * @polymer
+ * @mixinFunction
+ * @param {class} base The base class
+ * @returns {class} The base class with the mixin applied
+ */
+export const rangeInputMixin = (base) => 
+/**
+ * @polymer
+ * @mixinClass
+ */
+class extends base {
+    static get properties() {
+        return {
+            filter: { type: Object, notify: true },
+            values: {
+                type: Array,
+                value() {
+                    return [];
+                },
+            },
+            headerFocused: { type: Boolean, notify: true },
+            min: { type: Number, value: null },
+            max: { type: Number, value: null },
+            limits: { type: Function },
+            /**
+             * If true, _limitInput and _updateFilter will be called after each value change
+             */
+            autoupdate: { type: String, value: true },
+            locale: { type: String, value: null },
+            _filterInput: {
+                type: Object,
+                value() {
+                    return { min: null, max: null };
+                },
+            },
+            _range: { type: Object, computed: '_computeRange(values.*)' },
+            _limit: {
+                type: Object,
+                computed: '_computeLimit(_range, _filterInput.*, min, max)',
+                value() {
+                    return {};
+                },
+            },
+            _tooltip: {
+                type: String,
+                computed: '_computeTooltip(title, _filterText)',
+            },
+            _fromClasses: {
+                type: String,
+                computed: '_computeInputClasses(_filterInput.min)',
+            },
+            _toClasses: {
+                type: String,
+                computed: '_computeInputClasses(_filterInput.max)',
+            },
+        };
+    }
+    static get observers() {
+        return [
+            '_filterInputChanged(_filterInput.*, autoupdate)',
+            '_filterChanged(filter.*)',
+            '_updateLimits(limits, headerFocused)',
+        ];
+    }
+    disconnectedCallback() {
+        if (this._limitInputDebouncer) {
+            this._limitInputDebouncer.cancel();
+        }
+        super.disconnectedCallback();
+    }
+    _computeInputClasses(value) {
+        return value != null && value !== '' ? 'has-value' : '';
+    }
+    /**
+     * Converts a value to number optionaly limiting it.
+     *
+     * @param	 {Number|*} value	 The value to convert to number
+     * @param	 {Number|*} limit	 The value used to limit the number
+     * @param	 {Function} limitFunc	 The function used to limit the number (Math.min|Math.max)
+     * @returns {Number|void}		 Value converted to Number or void
+     */
+    toNumber(value, limit, limitFunc) {
+        if (value == null || value === '') {
+            return;
+        }
+        const number = typeof value === 'number' ? value : Number(value);
+        if (Number.isNaN(number)) {
+            return;
+        }
+        if (limitFunc == null || limit == null) {
+            return number;
+        }
+        const lNumber = this.toNumber(limit);
+        if (lNumber == null) {
+            return number;
+        }
+        return limitFunc(number, lNumber);
+    }
+    toValue() {
+        return this.toNumber.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) {
+        if (item == null) {
+            return;
+        }
+        let value = item;
+        if (valuePath != null) {
+            value = this.get(valuePath, item);
+        }
+        return this.toValue(value);
+    }
+    renderValue() {
+        //overrideable
+    }
+    getInputString(item, valuePath = this.valuePath) {
+        const value = this.toValue(this.get(valuePath, item));
+        return this._toInputString(value);
+    }
+    /**
+     * Computes min/max range from values.
+     *
+     * @param	 {Object} change `values` property changes
+     * @returns {Object} Computed min/max
+     */
+    _computeRange(change) {
+        const allValues = change.base, values = Array.isArray(allValues) &&
+            allValues.length &&
+            allValues.map((v) => this.toValue(v)).filter((n) => n != null);
+        if (!values || values.length < 1) {
+            return { min: null, max: null };
+        }
+        return values.reduce((p, n) => {
+            return {
+                min: this.toValue(n, p.min, Math.min),
+                max: this.toValue(n, p.max, Math.max),
+            };
+        }, {});
+    }
+    _computeLimit(range, inputChange, min, max) {
+        if (!range) {
+            return;
+        }
+        const input = inputChange.base, nMin = this.toValue(min), nMax = this.toValue(max), aMin = nMin != null ? nMin : this.toValue(range.min), aMax = nMax != null ? nMax : this.toValue(range.max);
+        return {
+            fromMin: aMin,
+            fromMax: this.toValue(aMax, this._fromInputString(input.max, 'max'), Math.min),
+            toMin: this.toValue(aMin, this._fromInputString(input.min, 'min'), Math.max),
+            toMax: aMax,
+        };
+    }
+    _computeFilterText(change) {
+        if (change.base == null) {
+            return undefined;
+        }
+        const filter = change.base, min = this.toValue(filter.min), max = this.toValue(filter.max), text = [];
+        if (min != null) {
+            text.push(this.renderValue(min));
+        }
+        text.push(' - ');
+        if (max != null) {
+            text.push(this.renderValue(max));
+        }
+        return text.length > 1 ? text.join('') : undefined;
+    }
+    _computeTooltip(title, text) {
+        if (text == null) {
+            return title;
+        }
+        return `${title}: ${text}`;
+    }
+    _fromInputString(value) {
+        return this.toValue(value);
+    }
+    _toInputString(value) {
+        const val = this.toValue(value);
+        if (val == null) {
+            return null;
+        }
+        return val;
+    }
+    _getDefaultFilter() {
+        return { min: null, max: null };
+    }
+    /**
+     * Observes changes of _filterInput, saves the path, debounces _limitInput.
+     *
+     * @param	 {Object} change '_filterInput' property changes
+     * @param	 {Boolean} autoupdate whether to auto-update on value changes
+     * @returns {void}
+     */
+    _filterInputChanged(change, autoupdate) {
+        const path = change.path.split('.')[1];
+        this.__inputChangePath = path || null;
+        if (!autoupdate) {
+            return;
+        }
+        this._limitInputDebouncer = Debouncer.debounce(this._limitInputDebouncer, timeOut.after(600), () => {
+            this._limitInput();
+            this._updateFilter();
+        });
+        enqueueDebouncer(this._limitInputDebouncer);
+    }
+    _clearFrom() {
+        this.set('_filterInput.min', null);
+        this._updateFilter();
+    }
+    _clearTo() {
+        this.set('_filterInput.max', null);
+        this._updateFilter();
+    }
+    _onBlur() {
+        this._limitInput();
+        this._updateFilter();
+    }
+    _onKeyDown(event) {
+        const input = event.currentTarget, inputs = Array.from(input.parentElement.querySelectorAll('cosmoz-input')), nextInput = inputs[inputs.findIndex((i) => i === input) + 1], isLastInput = !nextInput, isFirstInput = inputs[0] === input;
+        switch (event.keyCode) {
+            case 13: // Enter
+                event.preventDefault();
+                if (!isLastInput) {
+                    nextInput.focus();
+                }
+                else {
+                    // if this is the last input, update the filter
+                    const limited = this._limitInput();
+                    this._updateFilter();
+                    // and close the dropdown if the value was not out of bounds
+                    if (!limited) {
+                        this._closeParent(input);
+                    }
+                }
+                break;
+            case 9: // Tab
+                if ((isLastInput && !event.shiftKey) ||
+                    (isFirstInput && event.shiftKey)) {
+                    this._closeParent(input);
+                }
+        }
+    }
+    _closeParent(input) {
+        getCloseableParent(input).close();
+    }
+    _onDropdownOpenedChanged({ currentTarget, detail: { value } }) {
+        if (!value) {
+            return;
+        }
+        // focus the first input after the dropdown is visible
+        setTimeout(() => currentTarget.querySelector('cosmoz-input').focus(), 100);
+    }
+    /**
+     * Debounced function called by `_filterInputChanged` when `_filterInput` changes.
+     *
+     * @returns {void}
+     */
+    _limitInput() {
+        const input = this._filterInput, path = this.__inputChangePath, value = path
+            ? this._fromInputString(this.get(path, input), path)
+            : null;
+        this.__inputChangePath = null;
+        if (value == null) {
+            //Don't limit a null value
+            return false;
+        }
+        const limit = this._limit, limitPath = path === 'min' ? 'from' : 'to', lowerLimit = this.get(limitPath + 'Min', limit), upperLimit = this.get(limitPath + 'Max', limit), minValue = this.toValue(value, lowerLimit, Math.max), limitedValue = this.toValue(minValue, upperLimit, Math.min);
+        if (this.getComparableValue(value) !== this.getComparableValue(limitedValue)) {
+            //set value without debouncing _limitInput again.
+            this.set(['_filterInput', path], this._toInputString(limitedValue, path));
+            if (this._limitInputDebouncer) {
+                this._limitInputDebouncer.cancel();
+            }
+            return true;
+        }
+        return false;
+    }
+    _updateFilter() {
+        const input = this._filterInput, filter = this.filter, min = this._fromInputString(input.min, 'min'), max = this._fromInputString(input.max, 'max');
+        if (this.getComparableValue(min) ===
+            this.getComparableValue(filter, 'min') &&
+            this.getComparableValue(max) === this.getComparableValue(filter, 'max')) {
+            return;
+        }
+        this.set('filter', { min, max });
+    }
+    _filterChanged(change) {
+        if (this._filterInput == null) {
+            return;
+        }
+        const input = this._filterInput, filter = change.base, min = this._fromInputString(input.min, 'min'), max = this._fromInputString(input.max, 'max');
+        if (this.getComparableValue(min) ===
+            this.getComparableValue(filter, 'min') &&
+            this.getComparableValue(max) === this.getComparableValue(filter, 'max')) {
+            return;
+        }
+        this.set('_filterInput', {
+            min: this._toInputString(filter.min),
+            max: this._toInputString(filter.max),
+        });
+        if (this._limitInputDebouncer) {
+            this._limitInputDebouncer.cancel();
+        }
+    }
+    hasFilter() {
+        const filter = this.filter;
+        if (filter == null) {
+            return false;
+        }
+        return (this.toValue(filter.min) != null || this.toValue(filter.max) != null);
+    }
+    resetFilter() {
+        this.filter = this._getDefaultFilter();
+    }
+    _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 } : {}),
+            });
+        });
+    }
+};
+//# sourceMappingURL=cosmoz-omnitable-range-input-mixin.js.map

package/dist/lib/cosmoz-omnitable-resize-nub.d.ts

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

package/dist/lib/cosmoz-omnitable-resize-nub.d.ts.map

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

package/dist/lib/cosmoz-omnitable-resize-nub.js

@@ -0,0 +1,33 @@
+import { useEffect, component } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+const ResizeNub = (host) => {
+    const { column } = host;
+    useEffect(() => {
+        let initial = 0;
+        let initialWidth = 0;
+        const move = (ev) => {
+            host.dispatchEvent(new CustomEvent('column-resize', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    newWidth: Math.ceil(initialWidth + ev.pageX - initial),
+                    column,
+                },
+            }));
+        }, stop = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', stop);
+        }, start = (ev) => {
+            initial = ev.pageX;
+            initialWidth =
+                host.previousElementSibling.getBoundingClientRect().width;
+            document.addEventListener('pointermove', move);
+            document.addEventListener('pointerup', stop);
+        };
+        host.addEventListener('pointerdown', start);
+        return () => host.removeEventListener('pointerdown', start);
+    }, [column]);
+    return nothing;
+};
+customElements.define('cosmoz-omnitable-resize-nub', component(ResizeNub));
+//# sourceMappingURL=cosmoz-omnitable-resize-nub.js.map

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

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

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

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