@revolist/revogrid 3.1.5 → 3.1.90

package/dist/collection/plugins/autoSizeColumn.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 /**
  * Plugin module for revo-grid grid system
  * Add support for automatic column resize
@@ -93,7 +96,7 @@ export default class AutoSizeColumn extends BasePlugin {
       const sizes = {};
       each(autoSize[type], rgCol => {
         // calculate size
-        rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), 0);
+        rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ''));
       });
       this.providers.dimensionProvider.setDimensionSize(type, sizes);
     });

package/dist/collection/plugins/basePlugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 export default class BasePlugin {
   constructor(revogrid) {
     this.revogrid = revogrid;

package/dist/collection/plugins/dispatcher.js

@@ -0,0 +1,22 @@
+/*!
+ * Built by Revolist
+ */
+/**
+ * Dispatch custom event to element
+ */
+export function dispatch(target, eventName, detail) {
+  const event = new CustomEvent(eventName, {
+    detail,
+    cancelable: true,
+    bubbles: true,
+  });
+  target === null || target === void 0 ? void 0 : target.dispatchEvent(event);
+  return event;
+}
+/**
+ * Dispatch event by other event target
+ */
+export function dispatchOnEvent(e, eventName, detail) {
+  e.preventDefault();
+  return dispatch(e.target, eventName, detail);
+}

package/dist/collection/plugins/export/csv.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { getGroupingName, isGrouping } from '../groupingRow/grouping.service';
 const INITIAL = {
   mime: 'text/csv',

package/dist/collection/plugins/export/export.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import fill from 'lodash/fill';
 import { columnTypes, rowTypes } from '../../store/storeTypes';
 import { timeout } from '../../utils/utils';

package/dist/collection/plugins/export/types.js

@@ -1 +1,4 @@
+/*!
+ * Built by Revolist
+ */
 export {};

package/dist/collection/plugins/filter/conditions/equal.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const eq = (value, extra) => {
   if (typeof value === 'undefined' || (value === null && !extra)) {
     return true;

package/dist/collection/plugins/filter/conditions/number/greaterThan.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const gtThan = function (value, extra) {
   let conditionValue;
   if (typeof value === 'number') {

package/dist/collection/plugins/filter/conditions/number/greaterThanOrEqual.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import eq from '../equal';
 import gt from './greaterThan';
 const gtThanEq = function (value, extra) {

package/dist/collection/plugins/filter/conditions/number/lessThan.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const lt = function (value, extra) {
   let conditionValue;
   if (typeof value === 'number') {

package/dist/collection/plugins/filter/conditions/number/lessThanOrEqual.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import eq from '../equal';
 import lt from './lessThan';
 const lsEq = function (value, extra) {

package/dist/collection/plugins/filter/conditions/set.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const set = (value) => !(value === '' || value === null || value === void 0);
 export const notSet = (value) => !set(value);
 export default set;

package/dist/collection/plugins/filter/conditions/string/beginswith.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const beginsWith = (value, extra) => {
   if (!value) {
     return false;

package/dist/collection/plugins/filter/conditions/string/contains.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 const contains = (value, extra) => {
   if (!value) {
     return false;

package/dist/collection/plugins/filter/filter.button.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 export const FILTER_BUTTON_CLASS = 'rv-filter';
 export const FILTER_BUTTON_ACTIVE = 'active';

package/dist/collection/plugins/filter/filter.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 import BasePlugin from '../basePlugin';
 import { FILTER_PROP, isFilterBtn } from './filter.button';
@@ -39,7 +42,7 @@ export default class FilterPlugin extends BasePlugin {
     this.addEventListener('headerclick', headerclick);
     this.addEventListener('aftersourceset', aftersourceset);
     this.revogrid.registerVNode([
-      h("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), ref: e => (this.pop = e) }),
+      h("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
     ]);
   }
   initConfig(config) {

package/dist/collection/plugins/filter/filter.pop.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { Component, h, Host, Listen, Prop, State, Event, Method } from '@stencil/core';
 import { AndOrButton, isFilterBtn, TrashButton } from './filter.button';
 import { RevoButton } from '../../components/button/button';
@@ -22,6 +25,7 @@ export class FilterPanel {
     this.filterTypes = {};
     this.filterNames = {};
     this.filterEntities = {};
+    this.disableDynamicFiltering = false;
     this.debouncedApplyFilter = debounce(() => {
       this.filterChange.emit(this.filterItems);
     }, 400);
@@ -114,8 +118,10 @@ export class FilterPanel {
       h("div", { class: "add-filter" },
         h("select", { id: "add-filter", class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
       h("div", { class: "filter-actions" },
-        h(RevoButton, { class: { red: true }, onClick: () => this.onReset() }, capts.reset),
-        h(RevoButton, { class: { light: true }, onClick: () => this.onCancel() }, capts.cancel))));
+        this.disableDynamicFiltering &&
+          h(RevoButton, { class: { red: true, save: true }, onClick: () => this.onSave() }, capts.save),
+        h(RevoButton, { class: { red: true, reset: true }, onClick: () => this.onReset() }, capts.reset),
+        h(RevoButton, { class: { light: true, cancel: true }, onClick: () => this.onCancel() }, capts.cancel))));
   }
   onFilterTypeChange(e, prop, index) {
     const el = e.target;
@@ -129,7 +135,8 @@ export class FilterPanel {
       if (input)
         input.focus();
     }, 0);
-    this.debouncedApplyFilter();
+    if (!this.disableDynamicFiltering)
+      this.debouncedApplyFilter();
   }
   onAddNewFilter(e) {
     const el = e.target;
@@ -142,7 +149,8 @@ export class FilterPanel {
       select.value = defaultType;
       this.currentFilterType = defaultType;
     }
-    this.debouncedApplyFilter();
+    if (!this.disableDynamicFiltering)
+      this.debouncedApplyFilter();
   }
   addNewFilterToProp() {
     var _a;
@@ -172,7 +180,8 @@ export class FilterPanel {
   onUserInput(index, prop, event) {
     // update the value of the filter item
     this.filterItems[prop][index].value = event.target.value;
-    this.debouncedApplyFilter();
+    if (!this.disableDynamicFiltering)
+      this.debouncedApplyFilter();
   }
   onKeyDown(e) {
     if (e.key.toLowerCase() === 'enter') {
@@ -188,6 +197,9 @@ export class FilterPanel {
     // keep event local, don't escalate farther to dom
     e.stopPropagation();
   }
+  onSave() {
+    this.filterChange.emit(this.filterItems);
+  }
   onCancel() {
     this.changes = undefined;
   }
@@ -213,7 +225,8 @@ export class FilterPanel {
     // let's remove the prop if no more filters so the filter icon will be removed
     if (items.length === 0)
       delete this.filterItems[prop];
-    this.debouncedApplyFilter();
+    if (!this.disableDynamicFiltering)
+      this.debouncedApplyFilter();
   }
   toggleFilterAndOr(id) {
     this.assertChanges();
@@ -227,7 +240,8 @@ export class FilterPanel {
     if (index === -1)
       return;
     items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
-    this.debouncedApplyFilter();
+    if (!this.disableDynamicFiltering)
+      this.debouncedApplyFilter();
   }
   assertChanges() {
     if (!this.changes) {
@@ -374,6 +388,24 @@ export class FilterPanel {
         "tags": [],
         "text": ""
       }
+    },
+    "disableDynamicFiltering": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disable-dynamic-filtering",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/plugins/filter/filter.service.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import eq, { notEq } from './conditions/equal';
 import gtThan from './conditions/number/greaterThan';
 import gtThanEq from './conditions/number/greaterThanOrEqual';

package/dist/collection/plugins/filter/filter.types.js

@@ -1 +1,4 @@
+/*!
+ * Built by Revolist
+ */
 export {};

package/dist/collection/plugins/groupingColumn/columnGroupsRenderer.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 import findIndex from 'lodash/findIndex';
 import { getItemByIndex } from '../../store/dimension/dimension.helpers';

package/dist/collection/plugins/groupingColumn/grouping.col.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import isArray from 'lodash/isArray';
 import map from 'lodash/map';
 import BasePlugin from '../basePlugin';
@@ -30,7 +33,7 @@ export default class GroupingColumnPlugin extends BasePlugin {
     res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
     return res;
   }
-  static isColGrouping(colData) {
-    return !!colData.children;
-  }
+}
+export function isColGrouping(colData) {
+  return !!colData.children;
 }

package/dist/collection/plugins/groupingColumn/headerGroupRenderer.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 import { HEADER_CLASS, MIN_COL_SIZE } from '../../utils/consts';
 import { HeaderCellRenderer } from '../../components/header/headerCellRenderer';

package/dist/collection/plugins/groupingRow/grouping.const.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { GRID_INTERNALS } from '../../utils/consts';
 export const GROUP_DEPTH = `${GRID_INTERNALS}-depth`;
 export const PSEUDO_GROUP_ITEM = `${GRID_INTERNALS}-name`;

package/dist/collection/plugins/groupingRow/grouping.row.expand.service.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { PSEUDO_GROUP_ITEM_ID, GROUP_EXPANDED, GROUP_DEPTH } from './grouping.const';
 import { isGrouping, getParsedGroup, isSameGroup } from './grouping.service';
 // provide collapse data

package/dist/collection/plugins/groupingRow/grouping.row.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { getPhysical, setItems } from '../../store/dataSource/data.store';
 import { columnTypes } from '../../store/storeTypes';
 import BasePlugin from '../basePlugin';

package/dist/collection/plugins/groupingRow/grouping.row.renderer.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 import RowRenderer from '../../components/data/rowRenderer';
 import { GROUP_DEPTH, GROUP_EXPANDED, GROUP_EXPAND_BTN, GROUP_EXPAND_EVENT, PSEUDO_GROUP_ITEM } from './grouping.const';

package/dist/collection/plugins/groupingRow/grouping.row.types.js

@@ -1 +1,4 @@
+/*!
+ * Built by Revolist
+ */
 export {};

package/dist/collection/plugins/groupingRow/grouping.service.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { GROUP_DEPTH, GROUP_EXPANDED, PSEUDO_GROUP_COLUMN, PSEUDO_GROUP_ITEM, PSEUDO_GROUP_ITEM_ID, PSEUDO_GROUP_ITEM_VALUE } from './grouping.const';
 /**
  * Do actual grouping

package/dist/collection/plugins/groupingRow/grouping.trimmed.service.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { gatherTrimmedItems } from '../trimmed/trimmed.plugin';
 export const TRIMMED_GROUPING = 'grouping';
 /**

package/dist/collection/plugins/moveColumn/columnDragPlugin.js

@@ -0,0 +1,163 @@
+/*!
+ * Built by Revolist
+ */
+/**
+ * Plugin for column manual move
+ */
+import debounce from 'lodash/debounce';
+import each from 'lodash/each';
+import { getItemByPosition } from '../../store/dimension/dimension.helpers';
+import BasePlugin from '../basePlugin';
+import { ColumnOrderHandler } from './columnOrderHandler';
+import { dispatch } from '../dispatcher';
+import { isColGrouping } from '../groupingColumn/grouping.col.plugin';
+const COLUMN_CLICK = 'column-click';
+const MOVE = 'column-mouse-move';
+const DRAG_END = 'column-drag-end';
+const BEFORE_DRAG_END = 'before-column-drag-end';
+// use this event subscription to drop D&D for particular columns
+const DRAG_START = 'column-drag-start';
+export default class ColumnPlugin extends BasePlugin {
+  constructor(revogrid, providers) {
+    super(revogrid);
+    this.revogrid = revogrid;
+    this.providers = providers;
+    this.moveFunc = debounce((e) => this.doMove(e), 5);
+    this.staticDragData = null;
+    this.dragData = null;
+    this.localSubscriptions = {};
+    this.orderUi = new ColumnOrderHandler();
+    revogrid.registerVNode([this.orderUi.render()]);
+    /** Register events */
+    this.localSubscriptions['mouseleave'] = {
+      target: document,
+      callback: (e) => this.onMouseOut(e),
+    };
+    this.localSubscriptions['mouseup'] = {
+      target: document,
+      callback: (e) => this.onMouseUp(e),
+    };
+    this.localSubscriptions['mousemove'] = {
+      target: document,
+      callback: (e) => this.move(e),
+    };
+    this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
+  }
+  dragStart({ event, data }) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+    // check if allowed to drag particulat column
+    if (defaultPrevented) {
+      return;
+    }
+    this.clearOrder();
+    const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
+    mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
+    mouseup.target.addEventListener('mouseup', mouseup.callback);
+    const dataEl = event.target.closest('revogr-header');
+    const scrollEl = event.target.closest('revogr-viewport-scroll');
+    if (!dataEl || !scrollEl) {
+      return;
+    }
+    if (isColGrouping(data)) {
+      return;
+    }
+    const cols = this.getDimension(data.pin || 'rgCol');
+    const gridRect = this.revogrid.getBoundingClientRect();
+    const elRect = dataEl.getBoundingClientRect();
+    const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+    this.staticDragData = {
+      startPos: event.x,
+      startItem,
+      data,
+      dataEl,
+      scrollEl,
+      gridEl: this.revogrid,
+      cols,
+    };
+    this.dragData = this.getData(this.staticDragData);
+    mousemove.target.addEventListener('mousemove', mousemove.callback);
+    this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
+  }
+  doMove(e) {
+    if (!this.staticDragData) {
+      return;
+    }
+    const dragData = (this.dragData = this.getData(this.staticDragData));
+    if (!dragData) {
+      return;
+    }
+    const start = this.staticDragData.startPos;
+    if (Math.abs(start - e.x) > 10) {
+      const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+      const rgCol = getItemByPosition(this.staticDragData.cols, x);
+      this.orderUi.autoscroll(x, dragData.elRect.width);
+      this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+    }
+  }
+  move(e) {
+    dispatch(this.revogrid, MOVE, Object.assign({}, e));
+    // then do move
+    this.moveFunc(e);
+  }
+  onMouseOut(_) {
+    this.clearOrder();
+  }
+  onMouseUp(e) {
+    // apply new positions
+    if (this.dragData) {
+      let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+      if (relativePos < 0) {
+        relativePos = 0;
+      }
+      const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
+      const store = this.providers.column.stores[this.dragData.type].store;
+      const items = [...store.get('items')];
+      // prevent position change if needed
+      const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]] }));
+      if (!stopDrag) {
+        // todo: if move item out of group remove item from group
+        const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);
+        items.splice(newPosition.itemIndex, 0, ...toMove);
+        store.set('items', items);
+      }
+      dispatch(this.revogrid, DRAG_END, this.dragData);
+    }
+    this.clearOrder();
+  }
+  clearLocalSubscriptions() {
+    each(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
+  }
+  clearOrder() {
+    this.staticDragData = null;
+    this.dragData = null;
+    this.clearLocalSubscriptions();
+    this.orderUi.stop();
+  }
+  /**
+   * Clearing subscription
+   */
+  clearSubscriptions() {
+    super.clearSubscriptions();
+    this.clearLocalSubscriptions();
+  }
+  getData({ gridEl, dataEl, data, }) {
+    const gridRect = gridEl.getBoundingClientRect();
+    const elRect = dataEl.getBoundingClientRect();
+    const scrollOffset = elRect.left - gridRect.left;
+    return {
+      elRect,
+      gridRect,
+      type: data.pin || 'rgCol',
+      scrollOffset,
+    };
+  }
+  getDimension(type) {
+    return this.providers.dimension.stores[type].getCurrentState();
+  }
+}
+export function getLeftRelative(absoluteX, gridPos, offset) {
+  return absoluteX - gridPos - offset;
+}

package/dist/collection/plugins/moveColumn/columnOrderHandler.js

@@ -0,0 +1,63 @@
+/*!
+ * Built by Revolist
+ */
+import { h } from '@stencil/core';
+export class ColumnOrderHandler {
+  constructor() {
+    this.offset = 0;
+  }
+  renderAutoscroll(_, parent) {
+    if (!parent) {
+      return;
+    }
+    this.autoscrollEl = document.createElement('div');
+    this.autoscrollEl.classList.add('drag-auto-scroll-y');
+    parent.appendChild(this.autoscrollEl);
+  }
+  autoscroll(pos, dataContainerSize, direction = 'translateX') {
+    if (!this.autoscrollEl) {
+      return;
+    }
+    const helperOffset = 10;
+    // calculate current y position inside of the grid active holder
+    // 3 - size of element + border
+    const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
+    this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
+    this.autoscrollEl.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  }
+  start(e, { dataEl, gridRect, scrollEl }, dir = 'left') {
+    const scrollContainerRect = scrollEl.getBoundingClientRect();
+    if (scrollContainerRect) {
+      this.offset = scrollContainerRect[dir] - gridRect[dir];
+    }
+    this.renderAutoscroll(e, dataEl);
+  }
+  stop() {
+    var _a;
+    if (this.element) {
+      this.element.hidden = true;
+    }
+    this.offset = 0;
+    (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
+    this.autoscrollEl = undefined;
+  }
+  showHandler(pos, size, direction = 'translateX') {
+    if (!this.element) {
+      return;
+    }
+    // do not allow overcross top of the scrollable area, header excluded
+    if (this.offset) {
+      pos = Math.max(pos, this.offset);
+    }
+    // can not be bigger then grid end
+    pos = Math.min(pos, size);
+    this.element.style.transform = `${direction}(${pos}px)`;
+    this.element.hidden = false;
+  }
+  render() {
+    return h("div", { class: "drag-position-y", hidden: true, ref: (el) => (this.element = el) });
+  }
+}

package/dist/collection/plugins/sorting/sorting.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import size from 'lodash/size';
 import { setStore } from '../../utils/store.utils';
 import ColumnDataProvider from '../../services/column.data.provider';

package/dist/collection/plugins/sorting/sorting.sign.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { h } from '@stencil/core';
 export const FILTER_BUTTON_CLASS = 'rv-filter';
 export const FILTER_BUTTON_ACTIVE = 'active';

package/dist/collection/plugins/stretchPlugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { each } from 'lodash';
 import { getScrollbarWidth } from '../utils/utils';
 import BasePlugin from './basePlugin';

package/dist/collection/plugins/trimmed/trimmed.plugin.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 /**
  * Hide items from main collection
  * But keep them in store

package/dist/collection/services/cell.helpers.js

@@ -1,3 +1,6 @@
+/*!
+ * Built by Revolist
+ */
 import { DATA_COL, DATA_ROW } from '../utils/consts';
 export function getCell(cell) {
   return {