@neovici/cosmoz-omnitable 7.1.0 → 7.3.0

package/cosmoz-omnitable-column-range-mixin.js

@@ -248,19 +248,13 @@ export const rangeColumnMixin = dedupingMixin(base => // eslint-disable-line max
 		}
 
 		_applySingleFilter(filter, item) {
-			const value = this.getComparableValue(item, this.valuePath),
-				minValue = this.getComparableValue(filter, 'min'),
-				maxValue = this.getComparableValue(filter, 'max');
-
-			if (value < minValue) {
-				return false;
-			}
-
-			if (value > maxValue) {
+			const value = this.getComparableValue(item, this.valuePath);
+			if (value == null) {
 				return false;
 			}
-
-			return true;
+			const min = this.getComparableValue(filter, 'min'),
+				max = this.getComparableValue(filter, 'max');
+			return !(value < min || value > max);
 		}
 
 		_computeFilterText(change) {

package/cosmoz-omnitable-group-row.js

@@ -1,91 +1,16 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
+import { component, useMemo } from 'haunted';
+import { nothing } from 'lit-html';
+import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
 
-import { repeaterMixin } from './cosmoz-omnitable-repeater-mixin';
+const GroupRow = ({ column, item, selected, folded }) => {
+	const columns = useMemo(() => column ? [column] : [], [column]);
+	useRenderOnColumnUpdates(columns);
 
-/**
- * @polymer
- * @customElement
- * @appliesMixin repeaterMixin
- */
-class OmnitableGroupRow extends repeaterMixin(PolymerElement) {
-	static get template() {
-		return html`
-		<slot name="group-row"></slot>
-`;
+	if (!column) {
+		return nothing;
 	}
 
-	static get is() {
-		return 'cosmoz-omnitable-group-row';
-	}
-
-	static get properties() {
-		return {
-			column: {
-				type: Object,
-				observer: '_columnChanged'
-			},
-
-			item: {
-				type: Object
-			},
-
-			selected: {
-				type: Boolean,
-				observer: '_selectedChanged'
-			},
-
-			folded: {
-				type: Boolean,
-				observer: '_foldedChanged'
-			}
-		};
-	}
-
-	static get observers() {
-		return [
-			'_itemUpdated(item.*)'
-		];
-	}
-
-	get _elementType() {
-		return 'div';
-	}
-
-	get _slotName() {
-		return 'group-row';
-	}
+	return (column.renderGroup ?? column.renderCell)(column, { item, selected, folded });
+};
 
-	constructor() {
-		super();
-		this.trackColumns();
-	}
-
-	_columnChanged(newColumn) {
-		if (!newColumn) {
-			return;
-		}
-		if (this.columns && this.columns.length > 0) {
-			this.splice('columns', 0, 1, newColumn);
-			return;
-		}
-		this.columns = [newColumn];
-	}
-
-	_getRenderFn(column) {
-		return column.renderGroup ?? column.renderCell;
-	}
-
-	_itemUpdated(changeRecord) {
-		this.forwardPathChange(changeRecord);
-	}
-
-	_selectedChanged(selected) {
-		this.forwardChange('selected', selected);
-	}
-
-	_foldedChanged(folded) {
-		this.forwardChange('folded', folded);
-	}
-}
-customElements.define(OmnitableGroupRow.is, OmnitableGroupRow);
+customElements.define('cosmoz-omnitable-group-row', component(GroupRow, { useShadowDOM: false }));

package/cosmoz-omnitable-item-row.js

@@ -1,129 +1,23 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element';
-import { html } from '@polymer/polymer/lib/utils/html-tag';
-
-import { repeaterMixin } from './cosmoz-omnitable-repeater-mixin';
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin repeaterMixin
- */
-class OmnitableItemRow extends repeaterMixin(PolymerElement) {
-	static get template() {
-		return html`
-		<style>
-			:host {
-				display: flex;
-				white-space: nowrap;
-			}
-
-			:host > ::slotted(*) {
-				display: block;
-				flex: none;
-				padding: 0 3px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				box-sizing: border-box;
-				align-self: center;
-			}
-
-			:host > ::slotted([hidden]),
-			:host [hidden] {
-				display: none !important;
-			}
-		</style>
-		<slot name="item-cell"></slot>
-`;
-	}
-
-	static get is() {
-		return 'cosmoz-omnitable-item-row';
-	}
-
-	static get properties() {
-		return {
-			item: {
-				type: Object
-			},
-
-			selected: {
-				type: Boolean,
-				observer: '_selectedChanged'
-			},
-
-			expanded: {
-				type: Boolean,
-				observer: '_expandedChanged'
-			}
-		};
-	}
-
-	static get observers() {
-		return [
-			'_itemUpdated(item.*)'
-		];
-	}
-
-	get _elementType() {
-		return 'div';
-	}
-
-	get _slotName() {
-		return 'item-cell';
-	}
-
-	constructor() {
-		super();
-		this.trackColumns();
-	}
-
-	_getRenderFn(column) {
-		return column.editable
-			? column.renderEditCell
-			: column.renderCell;
-	}
-
-	/**
-	 * @inheritdoc
-	 */
-	_configureElement(element, column, instance) {
-		super._configureElement(element, column, instance);
-		element.style.minHeight = '0.5px';
-		element.toggleAttribute('editable', !!column.editable);
-		element.setAttribute('title', this._getCellTitle(column, this.item));
-		element.setAttribute('class', this._computeItemRowCellClasses(column));
-		element.setAttribute('name', column.name);
-	}
-
-	_itemUpdated(changeRecord) {
-		this.forwardPathChange(changeRecord);
-		this.forEachElement((element, column) => {
-			element.setAttribute('title', this._getCellTitle(column, this.item));
+import { component, html } from 'haunted';
+import { repeat } from 'lit-html/directives/repeat';
+import { useRenderOnColumnUpdates } from './lib/use-render-on-column-updates';
+
+const
+	renderCell = (column, data) => column.editable
+		? column.renderEditCell(column, data)
+		: column.renderCell(column, data),
+	ItemRow = ({ columns, groupOnColumn, item, selected, expanded }) => {
+		useRenderOnColumnUpdates(columns);
+
+		return repeat(columns, column => column.name, column => {
+			return html`<div
+				class="cell itemRow-cell ${ column.cellClass ?? '' }"
+				?hidden=${ column === groupOnColumn }
+				?editable=${ column.editable }
+				title=${ column.cellTitleFn(item, column.valuePath) }
+				name=${ column.name }
+			>${ renderCell(column, { item, selected, expanded }) }</div>`;
 		});
-	}
-
-	_selectedChanged(selected) {
-		this.forwardChange('selected', selected);
-	}
-
-	_expandedChanged(expanded) {
-		this.forwardChange('expanded', expanded);
-	}
-
-	/**
-	 * Get cell title displayed when hovering on the cell.
-	 * @param {object} column Column data.
-	 * @param {object} item Row item.
-	 * @returns {string} Cell title.
-	 */
-	_getCellTitle(column, item) {
-		return column && column.cellTitleFn(item, column.valuePath);
-	}
+	};
 
-	_computeItemRowCellClasses(column) {
-		return 'cell itemRow-cell'
-			+ (column.cellClass ? ' ' + column.cellClass + ' ' : '');
-	}
-}
-customElements.define(OmnitableItemRow.is, OmnitableItemRow);
+customElements.define('cosmoz-omnitable-item-row', component(ItemRow, { useShadowDOM: false }));

package/cosmoz-omnitable-styles.js

@@ -21,7 +21,7 @@ const checkbox = `
 	}
 
 	.checkbox:checked {
-		background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+		background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 		box-shadow: none;
 	}
 
@@ -62,7 +62,7 @@ const checkbox = `
 		height: 2px;
 		left: 4px;
 		top: 8px;
-	    background-color: var(--paper-checkbox-checked-color, var(--primary-color));
+	  background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
 	}
 `;
 
@@ -160,6 +160,27 @@ export default `<style>
 		position: relative;
 	}
 
+
+	cosmoz-omnitable-item-row {
+		display: flex;
+		white-space: nowrap;
+	}
+
+	cosmoz-omnitable-item-row > div {
+		display: block;
+		flex: none;
+		padding: 0 3px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		box-sizing: border-box;
+		align-self: center;
+	}
+
+	cosmoz-omnitable-item-row > div[hidden] {
+		display: none !important;
+	}
+
 	.tableContent {
 		overflow-y: auto;
 		min-height: 90px;
@@ -260,7 +281,7 @@ export default `<style>
 		display: flex;
 		align-items: center;
 		border-top: solid 1px #e8e8e8;
-		background-color: #f5f5f5;
+		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
 		min-height: 25px;
 		height: 63px;
 		margin-bottom: 1px; /* Chrome overflow rendering bug? When only component in a view */

package/cosmoz-omnitable.js

@@ -3,7 +3,6 @@ import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
 import '@polymer/iron-label/iron-label';
 import '@polymer/paper-button/paper-button';
-import '@polymer/paper-checkbox/paper-checkbox';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@polymer/paper-icon-button/paper-icon-button';
 import '@polymer/paper-item/paper-item';
@@ -37,6 +36,7 @@ import { mixin, hauntedPolymer } from '@neovici/cosmoz-utils';
 import { isEmpty } from '@neovici/cosmoz-utils/lib/template.js';
 import { useOmnitable } from './lib/use-omnitable';
 import './lib/cosmoz-omnitable-settings';
+import { genericSorter } from './lib/generic-sorter';
 
 const PROPERTY_HASH_PARAMS = ['sortOn', 'groupOn', 'descending', 'groupOnDescending'];
 
@@ -64,7 +64,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 				<cosmoz-omnitable-header-row
 					columns="[[ normalizedColumns ]]"
 					group-on-column="[[ groupOnColumn ]]"
-					content="[[ _renderSettings(normalizedSettings, collapsedColumns, settingsId, hasChangedSettings) ]]"
+					content="[[ _renderSettings(normalizedSettings, collapsedColumns, settingsId, hasChangedSettings, hasHiddenFilter) ]]"
 				>
 			</div>
 			<div class="tableContent" id="tableContent">
@@ -377,7 +377,8 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		 	 */
 			columns: {
 				type: Array,
-				notify: true
+				notify: true,
+				value: () => []
 			},
 
 			settings: {
@@ -455,6 +456,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		window.addEventListener('keydown', this._onKey);
 		window.addEventListener('keyup', this._onKey);
 		this._resizeObserver.observe(this);
+		this._updateParamsFromHash();
 	}
 
 	disconnectedCallback() {
@@ -521,7 +523,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 	}
 
 	_onColumnTitleChanged(event) {
-
 		event.stopPropagation();
 
 		if (!Array.isArray(this.columns)) {
@@ -729,16 +730,11 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 	 * @param {String} attribute The attribute name of the column.
 	 * @returns {Object} The found column.
 	 */
-	_getColumn(attributeValue, attribute = 'name', columns = this.columns) {
+	_getColumn(attributeValue, attribute = 'name', columns) {
 		if (!attributeValue || !columns) {
 			return;
 		}
-		const column = columns.find(column => column[attribute] === attributeValue);
-		if (!column) {
-			// eslint-disable-next-line no-console
-			console.warn(`Cannot find column with ${ attribute } ${ attributeValue }`);
-		}
-		return column;
+		return columns.find(column => column[attribute] === attributeValue);
 	}
 
 	_filterChanged({ detail }) {
@@ -749,12 +745,8 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		this._filterForRouteChanged(detail.column);
 	}
 
-	_groupOnColumnChanged(column) {
-		if (column && column.hasFilter()) {
-			column.resetFilter();
-		} else {
-			this._debounceProcessItems();
-		}
+	_groupOnColumnChanged() {
+		this._debounceProcessItems();
 	}
 
 	_debounceProcessItems() {
@@ -837,7 +829,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			const v1 = groupOnColumn.getComparableValue(a.items[0], groupOnColumn.groupOn),
 				v2 = groupOnColumn.getComparableValue(b.items[0], groupOnColumn.groupOn);
 
-			return this._genericSorter(v1, v2);
+			return genericSorter(v1, v2);
 		});
 
 		if (this.groupOnDescending) {
@@ -848,42 +840,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		this.filteredGroupedItems = groups;
 	}
 
-	/* eslint-disable-next-line max-statements */
-	_genericSorter(a, b) {
-		if (a === b) {
-			return 0;
-		}
-
-		if (a === undefined) {
-			return -1;
-		}
-
-		if (b === undefined) {
-			return 1;
-		}
-
-		if (typeof a === 'object' && typeof b === 'object') {
-			// HACK(pasleq): worst case, compare using values converted to string
-			return a.toString() < b.toString() ? -1 : 1;
-		}
-
-		if (typeof a === 'number' && typeof b === 'number') {
-			return a - b;
-		}
-
-		if (typeof a === 'string' && typeof b === 'string') {
-			return a < b ? -1 : 1;
-		}
-
-		if (typeof a === 'boolean' && typeof b === 'boolean') {
-			return a ? -1 : 1;
-		}
-
-		// eslint-disable-next-line no-console
-		console.warn('unsupported sort', typeof a, a, typeof b, b);
-		return 0;
-	}
-
 	/**
 	 * compareFunction for sort(), can be overridden
 	 * @see Array.prototype.sort()
@@ -896,7 +852,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		const v1 = this.sortOnColumn.getComparableValue(a, this.sortOnColumn.sortOn),
 			v2 = this.sortOnColumn.getComparableValue(b, this.sortOnColumn.sortOn);
 
-		return this._genericSorter(v1, v2);
+		return genericSorter(v1, v2);
 	}
 
 	/* eslint-disable-next-line max-statements */
@@ -1173,14 +1129,9 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		const column = this.columns.find(c => c.name === key);
 
 		if (!column) {
-			// eslint-disable-next-line no-console
-			console.warn('column with name', name, 'for param', key, 'not found!');
 			return;
 		}
 
-		if (column === this.groupOnColumn) {
-			return;
-		}
 		if (value === column._serializeFilter()) {
 			return;
 		}
@@ -1285,7 +1236,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 		};
 	}
 
-	_renderSettings(normalizedSettings, collapsed, settingsId, hasChangedSettings) {
+	_renderSettings(normalizedSettings, collapsed, settingsId, hasChangedSettings, hasHiddenFilter) {
 		return litHtml`<cosmoz-omnitable-settings
 			.settings=${ normalizedSettings }
 			.onSettings=${ this.setSettings }
@@ -1294,6 +1245,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			.hasChanges=${ hasChangedSettings }
 			.onSave=${ this.onSettingsSave }
 			.onReset=${ this.onSettingsReset }
+			.badge=${ hasHiddenFilter }
 		>`;
 	}
 }

package/lib/cosmoz-omnitable-settings.js

@@ -5,6 +5,7 @@ import { portal } from '@neovici/cosmoz-utils/lib/directives/portal';
 import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
 import { checkbox } from '../cosmoz-omnitable-styles';
 import { nothing } from 'lit-html';
+import { columnSymbol } from './normalize-settings';
 const settingsStyles = `
 	:host {
 		position: fixed;
@@ -54,6 +55,9 @@ const settingsStyles = `
 	.title {
 		flex: 1;
 	}
+	.title[has-filter] {
+		font-weight: bold;
+	}
 	${ checkbox }
 	.footer {
 		display: flex;
@@ -177,7 +181,7 @@ const settingsStyles = `
 			<button class="sort" mousedown="">
 				<svg viewBox="0 0 24 24" width="24"><path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"></path></svg>
 			</button>
-			<label class="title">${ column.title }</label>
+			<label class="title" ?has-filter=${ !!column[columnSymbol].getFilterFn() }>${ column.title }</label>
 			<input class="checkbox" type="checkbox" .checked=${ checked } @click=${ onToggle }
 				.indeterminate=${ indeterminate } .windeterminate=${ indeterminate }
 			>
@@ -201,7 +205,7 @@ const settingsStyles = `
 	},
 
 	Settings = host => {
-		const { settings, onSettings, onSave, onReset, collapsed, settingsId, hasChanges } = host,
+		const { settings, onSettings, onSave, onReset, collapsed, settingsId, hasChanges, badge } = host,
 			{ active, onFocus, onToggle } = useFocus(host),
 			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []);
 
@@ -216,14 +220,25 @@ const settingsStyles = `
 					outline: none;
 					background: transparent;
 					cursor: pointer;
+					position: relative;
 				}
 				.anchor * { pointer-events: none; }
 				.anchor:hover {
 					background: #eee;
 				}
+				.badge {
+					position: absolute;
+					top: 1px;
+					right: -4px;
+ 					background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
+					width: 8px;
+					height: 8px;
+					border-radius: 100%;
+				}
 			</style>
-		    <button class="anchor" @focus=${ onFocus } @blur=${ onFocus } @click=${ onToggle } @mousedown=${ preventDefault }>
+		  <button class="anchor" @focus=${ onFocus } @blur=${ onFocus } @click=${ onToggle } @mousedown=${ preventDefault }>
 				<svg viewBox="0 0 24 24" width="24"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
+				${ badge ? html`<div class="badge"></div>` : nothing }
 			</button>
 			${ active
 		? portal(html`<cosmoz-omnitable-settings-ui

package/lib/generic-sorter.js

@@ -0,0 +1,35 @@
+// eslint-disable-next-line max-statements
+export const genericSorter = (a, b) => {
+	if (a === b) {
+		return 0;
+	}
+
+	if (a === undefined) {
+		return -1;
+	}
+
+	if (b === undefined) {
+		return 1;
+	}
+
+	if (typeof a === 'object' && typeof b === 'object') {
+		// HACK(pasleq): worst case, compare using values converted to string
+		return a.toString() < b.toString() ? -1 : 1;
+	}
+
+	if (typeof a === 'number' && typeof b === 'number') {
+		return a - b;
+	}
+
+	if (typeof a === 'string' && typeof b === 'string') {
+		return a < b ? -1 : 1;
+	}
+
+	if (typeof a === 'boolean' && typeof b === 'boolean') {
+		return a ? -1 : 1;
+	}
+
+	// eslint-disable-next-line no-console
+	console.warn('unsupported sort', typeof a, a, typeof b, b);
+	return 0;
+};

package/lib/use-omnitable.js

@@ -6,12 +6,26 @@ import { useSavedSettings } from './use-saved-settings';
 // eslint-disable-next-line max-lines-per-function
 export const useOmnitable = host => {
 	const
-		{ columns, groupOnColumn, resizeSpeedFactor, settingsId } = host,
+		{ columns, groupOnColumn, resizeSpeedFactor, settingsId, sortedFilteredGroupedItems } = host,
 		[settings, setSettings] = useState([]),
 		{ savedSettings, onSettingsSave, onSettingsReset, hasChangedSettings } = useSavedSettings(settingsId, settings, setSettings),
 		normalizedSettings = useMemo(() => normalizeSettings(columns, settings, savedSettings), [columns, settings, savedSettings]),
 		normalizedColumns = useMemo(() => normalizedSettings.map(s => s[columnSymbol]), [columns, ...normalizedSettings.map(s => s.name)]),
-		{ layoutCss, collapsedColumns } = useFastLayout({ host, settings: normalizedSettings, setSettings, groupOnColumn, resizeSpeedFactor });
+		{ layoutCss, collapsedColumns } = useFastLayout({ host, settings: normalizedSettings, setSettings, groupOnColumn, resizeSpeedFactor }),
+		filterFunctions = useMemo(() => {
+			if (!columns) {
+				return {};
+			}
+			return Object.fromEntries(columns
+				.map(col => [col.name, col.getFilterFn()])
+				.filter(([, fn]) => fn !== undefined));
+		}, [sortedFilteredGroupedItems]),
+		columnsWithFilters = useMemo(() => Object.keys(filterFunctions), [filterFunctions]),
+		hasHiddenFilter = useMemo(
+			() => [groupOnColumn, ...collapsedColumns, ...normalizedSettings.filter(s => s.disabled)]
+				.some(column => column && columnsWithFilters.includes(column.name)),
+			[columnsWithFilters, normalizedSettings, collapsedColumns]
+		);
 
 	return {
 		layoutCss,
@@ -19,6 +33,7 @@ export const useOmnitable = host => {
 		normalizedSettings,
 		normalizedColumns,
 		collapsedColumns,
+		hasHiddenFilter,
 		onSettingsSave,
 		onSettingsReset,
 		hasChangedSettings

package/lib/use-saved-settings.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'haunted';
-import { omit } from '@neovici/cosmoz-utils/lib/object';
+import { props } from '@neovici/cosmoz-utils/lib/object';
 
 const storagePrefix = 'omnitable-';
 
@@ -27,7 +27,7 @@ export const useSavedSettings = (settingsId, settings, setSettings) => {
 			}
 
 			try {
-				localStorage.setItem(storagePrefix + settingsId, JSON.stringify(settings.map(omit(['title', 'minWidth']))));
+				localStorage.setItem(storagePrefix + settingsId, JSON.stringify(settings.map(props(['name', 'priority', 'width', 'flex', 'disabled']))));
 				setSettings([]);
 				setCounter(counter => counter + 1);
 			} catch (e) {
@@ -36,8 +36,17 @@ export const useSavedSettings = (settingsId, settings, setSettings) => {
 			}
 		}, [settings]),
 
-		onSettingsReset: () => {
+		onSettingsReset: e => {
 			setSettings([]);
+
+			if (e.shiftKey) {
+				try {
+					localStorage.removeItem(storagePrefix + settingsId);
+					setCounter(counter => counter + 1);
+				} catch (err) {
+					// ignore error
+				}
+			}
 		},
 
 		hasChangedSettings: settings.length !== 0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "7.1.0",
+	"version": "7.3.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -64,7 +64,6 @@
 		"@polymer/iron-icons": "^3.0.0",
 		"@polymer/iron-label": "^3.0.0",
 		"@polymer/paper-button": "^3.0.0",
-		"@polymer/paper-checkbox": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",

package/cosmoz-omnitable-repeater-mixin.js

@@ -1,294 +0,0 @@
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin';
-import { render } from 'lit-html';
-import { set } from '@polymer/polymer/lib/utils/path';
-
-/**
- * Allows manipulation of elements.
- * @callback OmnitableRepeaterMixin~forEachElementCallback
- * @param {HTMLElement} element
- * @param {OmnitableColumn} column
- * @param {TemplateInstance} instance
- * @return {void}
- */
-
-const editableRegex = /columns\.(\d*)\.editable/iu;
-
-/**
- *
- * @polymer
- * @mixinFunction
- */
-export const repeaterMixin = dedupingMixin(base => class extends base { // eslint-disable-line max-lines-per-function
-	static get properties() {
-		return {
-			columns: {
-				type: Array
-			},
-
-			groupOnColumn: {
-				type: Object,
-				observer: '_groupOnColumnChanged'
-			}
-		};
-	}
-
-	constructor() {
-		super();
-		this._elements = [];
-		this._columnsObserver = null;
-	}
-
-	/**
-	 * Adds an observer to render the cells when the columns are changed.
-	 * @return {void}
-	 */
-	trackColumns() {
-		if (this._columnsObserver) {
-			throw new Error('The columns are already tracked.');
-		}
-
-		this._createMethodObserver('_columnsChanged(columns.*)');
-
-		// HACK we have to muck around with the property effect references because
-		// _createMethodObserver does not provide any reference to the property
-		// effect so we can easily remove it
-		this._columnsObserver = this[this.PROPERTY_EFFECT_TYPES.OBSERVE]['columns']
-			.find(fx => fx.info.methodName === '_columnsChanged');
-	}
-
-	/**
-	 * Stops reacting to column changes.
-	 * @return {void}
-	 */
-	stopTrackingColumns() {
-		if (!this._columnsObserver) {
-			throw new Error('The columns are not tracked.');
-		}
-
-		this._removePropertyEffect('columns', this.PROPERTY_EFFECT_TYPES.OBSERVE, this._columnsObserver);
-		this._columnsObserver = null;
-	}
-
-	/**
-	 * Renders all cells.
-	 * @return {void}
-	 */
-	renderCells() {
-		this._addElements(0, this.columns.length);
-	}
-
-	/**
-	 * Destroys all cells.
-	 * @return {void}
-	 */
-	destroyCells() {
-		this._removeElements(0, this.columns);
-	}
-
-	/**
-	 * Forwards a property change to all cells.
-	 * @param	 {String} property the property
-	 * @param	 {any}		value		 the new value
-	 * @return {void}
-	 */
-	forwardChange(property, value) {
-		this.forwardPathChange({
-			path: property,
-			value
-		});
-	}
-
-	/**
-	 * Forwards a path change to all cells.
-	 * @param	 {Object} changeRecord the change record
-	 * @return {void}
-	 */
-	forwardPathChange(changeRecord) {
-		this._elements.forEach(element =>
-			this._forwardNotifyPath(element.__instance, changeRecord.path, changeRecord.value, true)
-		);
-	}
-
-	/**
-	 * Runs a callback on each element.
-	 * @param	 {OmnitableRepeaterMixin~forEachElementCallback} callback the callback
-	 * @return {void}
-	 */
-	forEachElement(callback) {
-		this._elements.forEach(element => callback(element, element.__column, element.__instance));
-	}
-
-	/* eslint-disable no-empty-function, no-unused-vars */
-
-	/**
-	 * The type of element to be repeated.
-	 * Must be defined in implementors.
-	 * @return {String} The type of element to be repeated.
-	 */
-	get _elementType() {
-		return null;
-	}
-
-	/**
-	 * Slot name assigned to the repeated elements.
-	 * Must be defined in implementors.
-	 * @return {String} Slot name assigned to the repeated elements.
-	 */
-	get _slotName() {
-		return null;
-	}
-
-	/**
-	 * Get a render function for the specified column
-	 * Must be defined in implementors.
-	 * @abstract
-	 * @param {OmnitableColumnMixin} column - The column.
-	 * @return {Function} - The render function.
-	 */
-	_getRenderFn(column) {}
-
-	/* eslint-enable no-empty-function, no-unused-vars */
-
-	/**
-	 * Configure a newly created repeated element
-	 *
-	 * @param	 {HTMLElement}					element	 the root cell element
-	 * @param	 {OmnitableColumnMixin} column	 the column
-	 * @param	 {TemplateInstance}			instance the template instance
-	 * @return {void}
-	 */
-	_configureElement(element, column, instance) {
-		element.__instance = instance;
-		element.__column = column;
-
-		if (column === this.groupOnColumn) {
-			element.setAttribute('hidden', true);
-		}
-
-		element.setAttribute('slot', this._slotName);
-
-		column.addEventListener('cosmoz-column-prop-changed', instance.render);
-
-		element.__cleanup = () => {
-			element.__instance = element.__column = element.column = null;
-			column.removeEventListener('cosmoz-column-prop-changed', instance.render);
-		};
-	}
-
-	_columnsChanged({
-		path, base, value
-	}) {
-		const reMatch = editableRegex.exec(path);
-
-		if (path === 'columns') {
-			if (this._elements && this._elements.length) {
-				const removedColumns = this._elements.map(element => {
-					return element.__column;
-				});
-				this._removeElements(0, removedColumns);
-			} else {
-				this._elements = [];
-			}
-			this._addElements(0, this.columns.length);
-		} else if (path === 'columns.splices') {
-			this._renderSplices(value.indexSplices);
-		} else if (reMatch) {
-			// eslint-disable-next-line no-bitwise
-			const index = reMatch[1] >> 0,
-				column = base[index];
-			this._removeElements(index, [column]);
-			this._addElements(index, 1);
-		} else if (path !== 'columns.length') {
-			// column property change
-			// eslint-disable-next-line no-console
-			console.warn('column property change', path);
-		}
-	}
-
-	_renderSplices(splices) {
-		splices.forEach(splice => {
-			if (splice.removed.length) {
-				this._removeElements(splice.index, splice.removed);
-			}
-			if (splice.addedCount > 0) {
-				this._addElements(splice.index, splice.addedCount);
-			}
-		});
-	}
-
-	_getInstance(updateFn) {
-		const state = {
-			item: this.item,
-			selected: this.selected,
-			expanded: this.expanded,
-			folded: this.folded
-		};
-		updateFn(state);
-
-		return {
-			_setPendingPropertyOrPath(path, value) {
-				set(state, path, value);
-			},
-			_flushProperties() {
-				updateFn(state);
-			},
-			render() {
-				updateFn(state);
-			}
-		};
-	}
-
-	_addElements(start, count) {
-		const end = start + count;
-		for (let i = start; i < end; i++) {
-			const element = document.createElement(this._elementType),
-				column = this.columns[i],
-				renderFn = this._getRenderFn(column),
-				instance = this._getInstance(state => render(renderFn(column, state), element));
-
-			this._configureElement(element, column, instance);
-
-			if (i < this._elements.length) {
-				this.insertBefore(element, this._elements[i]);
-			} else {
-				this.appendChild(element);
-			}
-
-			this._elements.splice(i, 0, element);
-		}
-	}
-
-	_removeElements(start, removedColumns) {
-		this._elements
-			.splice(start, removedColumns.length)
-			.forEach(element => {
-				element.__cleanup();
-				this.removeChild(element);
-			});
-	}
-
-	_groupOnColumnChanged(column, previousColumn) {
-		if (!this._elements || !this._elements.length) {
-			return;
-		}
-		if (previousColumn) {
-			const previousElement = this._elements.find(e => e.__column === previousColumn);
-			if (previousElement) {
-				previousElement.removeAttribute('hidden');
-			}
-		}
-		if (column) {
-			const element = this._elements.find(e => e.__column === column);
-			if (element) {
-				element.setAttribute('hidden', '');
-			}
-		}
-	}
-
-	_forwardNotifyPath(instance, path, value, flush = false) {
-		instance._setPendingPropertyOrPath(path, value, false, true);
-		if (flush) {
-			instance._flushProperties(true);
-		}
-	}
-});