@sme.up/ketchup 6.2.0 → 6.4.0

package/dist/collection/components/kup-text-field/kup-text-field-declarations.js

@@ -5,6 +5,7 @@
 export var KupTextFieldProps;
 (function (KupTextFieldProps) {
   KupTextFieldProps["customStyle"] = "Custom style of the component.";
+  KupTextFieldProps["decimals"] = "Number of decimals (should be used when inputType is number).";
   KupTextFieldProps["disabled"] = "When set to true, the component is disabled.";
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";

package/dist/collection/components/kup-text-field/kup-text-field.js

@@ -25,6 +25,11 @@ export class KupTextField {
      * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
     this.customStyle = '';
+    /**
+     * Number of decimals (should be used when inputType is number).
+     * @default null
+     */
+    this.decimals = null;
     /**
      * When set to true, the component is disabled.
      * @default false
@@ -291,6 +296,7 @@ export class KupTextField {
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
+      decimals: this.decimals,
       disabled: this.disabled,
       fullHeight: this.rootElement.classList.contains('kup-full-height')
         ? true
@@ -380,6 +386,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "''"
     },
+    "decimals": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Number of decimals (should be used when inputType is number)."
+      },
+      "attribute": "decimals",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/f-components/f-button/f-button.js

@@ -58,7 +58,7 @@ function renderButton(props) {
   const styleSpinnerContainer = {
     '--kup_button_spinner_height': propsFImage.sizeY,
   };
-  return (h("button", { class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title, type: "button" },
+  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title },
     props.trailingIcon
       ? [
         h("span", { class: classLabelObj }, props.label),
@@ -93,7 +93,7 @@ function renderIconButton(props) {
   const iconOff = props.iconOff
     ? props.iconOff
     : props.icon + '_border';
-  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", value: props.checked ? 'on' : 'off', "aria-label": props.title },
+  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title },
     !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null,
     props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null,
     props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" },

package/dist/collection/f-components/f-cell/f-cell.js

@@ -223,7 +223,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     case FCellTypes.NUMBER:
       classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.STRING:
-      return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: isFullWidth(props) ? true : false, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
+      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, value: cellType === FCellTypes.NUMBER
           ? stringToNumber(cell.value).toString()
           : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
   }

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -55,7 +55,17 @@ function setContent(props) {
       props.maxLength)) : undefined,
     !props.trailingIcon ? iconEl : undefined,
     props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
+      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
+        ? props.label
+        : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
+        if (props.decimals !== null &&
+          props.inputType === 'number') {
+          e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
+        }
+        if (props.onChange) {
+          props.onChange(e);
+        }
+      }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
     props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
     props.trailingIcon ? iconEl : undefined,
     !props.fullWidth && !isOutlined ? labelEl : undefined,

package/dist/collection/managers/kup-data/kup-data-cell-helper.js

@@ -1,4 +1,11 @@
+import { SortMode } from '../../components/kup-data-table/kup-data-table-declarations';
+import { compareValues, getCellValueForDisplay, getValueForDisplay2, } from '../../utils/cell-utils';
+import { Filters } from '../../utils/filters/filters';
+import { KupObjects } from '../kup-objects/kup-objects';
 const dom = document.documentElement;
+const kupObjects = dom.ketchup
+  ? dom.ketchup.objects
+  : new KupObjects();
 /**
  * Finds all the cells matching the filters criteria in the input dataset.
  * @param {KupDataDataset} dataset - Input dataset.
@@ -9,25 +16,52 @@ export function findCell(dataset, filters) {
   return dom.ketchup.data.finder(dataset, filters).cells;
 }
 /**
- * Returns all the cells values of the specified columns.
- * @param {KupDataDataset} dataset - Input dataset.
- * @param {string[]} columns - Columns included in the search. When missing, searches all columns.
- * @returns {string[]} Values of the cells.
+ * Returns all the cells values of the specified column, sorted if required.
+ * @param {Array<KupDataRow>} dataset - Input dataset.
+ * @param {KupDataColumn} column - Column included in the search. When missing, returns empty array.
+ * @returns {ValueDisplayedValue[]} Values of the cells, sorted.
  */
-export function getCellValue(dataset, columns) {
-  const result = [];
-  for (let index = 0; index < dataset.rows.length; index++) {
-    const row = dataset.rows[index];
-    const cells = row.cells;
-    for (const key in cells) {
-      const cell = cells[key];
-      if (!columns || !columns.length || columns.includes(key)) {
-        result.push(cell.value);
-      }
-    }
+export function getCellValue(dataset, column, sorted, univocal) {
+  const rows = dataset.rows;
+  const values = new Array();
+  const result = new Array();
+  if (!rows || rows.length == 0 || !column) {
+    return result;
+  }
+  extractColumnValues(rows, column, values, univocal);
+  if (sorted == true) {
+    values.sort((n1, n2) => {
+      return compareValues(null, kupObjects.isDate(n1.obj)
+        ? n1.value
+        : getValueForDisplay2(n1, column), null, kupObjects.isDate(n2.obj)
+        ? n2.value
+        : getValueForDisplay2(n2, column), SortMode.A);
+    });
+  }
+  for (let i = 0; i < values.length; i++) {
+    let v = values[i];
+    result.push({ value: v.value, displayedValue: v.displayedValue });
   }
   return result;
 }
+function extractColumnValues(rows, column, values, univocal) {
+  /** il valore delle righe attualmente filtrate, formattato */
+  rows.forEach((row) => addColumnValueFromRow(values, column, row.cells[column.name], univocal));
+  return values;
+}
+export function addColumnValueFromRow(values, column, cell, univocal) {
+  if (cell) {
+    let item = {
+      value: cell.value,
+      displayedValue: getCellValueForDisplay(column, cell),
+      obj: cell.obj ? cell.obj : column.obj,
+    };
+    if (univocal != true ||
+      !Filters.valuesArrayContainsValue(values, cell.value)) {
+      values.push(item);
+    }
+  }
+}
 /**
  * Overrides the given cell attributes for the specified columns.
  * If no columns are provided, the value will be applied to every column of the dataset.

package/dist/collection/managers/kup-data/kup-data.js

@@ -17,8 +17,11 @@ export class KupData {
       find(dataset, filters) {
         return findCell(dataset, filters);
       },
-      getValue(dataset, columns) {
-        return getCellValue(dataset, columns);
+      getValue(dataset, column, sorted) {
+        return getCellValue(dataset, column, sorted, false);
+      },
+      getUnivocalValue(dataset, column, sorted) {
+        return getCellValue(dataset, column, sorted, true);
       },
       replace(dataset, cell, columns) {
         return replaceCell(dataset, cell, columns);
@@ -373,23 +376,18 @@ export class KupData {
       columns: JSON.parse(JSON.stringify(dataset.columns)),
       rows: [],
     };
-    const length = dataset.rows.length;
     // sort all columns values by descending
-    let values = getCellValue(dataset, [headerColumn]);
-    values.sort(function (a, b) {
-      return Number(a) - Number(b);
-    });
+    let values = getCellValue(dataset, this.column.find(dataset, { name: headerColumn })[0], true, true);
     values.reverse();
-    // excluding duplicates values.
-    values = [...new Set(values)];
+    const length = dataset.rows.length;
     // calculating middle index
     const idx = Math.floor(length / 2);
     let lastIdx = idx - 1;
     let leftIdx = idx - 1;
     let rightIdx = idx + 1;
     // sort the rows like a "mountain", the greatest is in the middle and the other ones are splitted left and right
-    for (let i = 0; i < length; i++) {
-      const value = values[i];
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i].value;
       // looping the rows because we have many rows with same value.
       this.finder(dataset, {
         columns: [headerColumn],

package/dist/collection/managers/kup-dates/kup-dates.js

@@ -45,6 +45,20 @@ export class KupDates {
       this.locale = navLangs[0]
         .split('-')[0]
         .toLowerCase();
+      let found = false;
+      for (const key in KupDatesLocales) {
+        if (Object.prototype.hasOwnProperty.call(KupDatesLocales, key)) {
+          const localeItem = KupDatesLocales[key];
+          if (localeItem == this.locale) {
+            found = true;
+            break;
+          }
+        }
+      }
+      if (!found) {
+        console.log('set forced locale: en');
+        this.locale = KupDatesLocales.ENGLISH;
+      }
     }
     dayjs.locale(this.locale);
     this.managedComponents.forEach(function (comp) {

package/dist/collection/managers/kup-interact/kup-interact.js

@@ -49,16 +49,13 @@ export class KupInteract {
             draggable.kupDragDrop.ghostImage
             ? draggable.kupDragDrop.ghostImage
             : e.target;
-          const oldTransform = ghostImage.style.transform;
           let x = parseFloat(ghostImage.getAttribute('data-x')) || 0;
           let y = parseFloat(ghostImage.getAttribute('data-y')) || 0;
           x = x + e.dx;
           y = y + e.dy;
           ghostImage.style.transform = `translate(${x}px, ${y}px)`;
-          if (dom.ketchup.interact.isInViewport(el, oldTransform, e.delta)) {
-            ghostImage.setAttribute('data-x', x.toString());
-            ghostImage.setAttribute('data-y', y.toString());
-          }
+          ghostImage.setAttribute('data-x', x.toString());
+          ghostImage.setAttribute('data-y', y.toString());
         }
       },
       start(e) {
@@ -106,6 +103,7 @@ export class KupInteract {
             break;
           case KupDragEffect.CLONE:
             ghostImage = draggable.cloneNode(true);
+            ghostImage.id = '';
             ghostImage.style.cursor = 'grabbing';
             ghostImage.style.height = draggable.clientHeight + 'px';
             ghostImage.style.left =

package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.js

@@ -3,6 +3,8 @@
  */
 export var ScrollOnHoverDirection;
 (function (ScrollOnHoverDirection) {
+  ScrollOnHoverDirection["BOTTOM"] = "bottom";
   ScrollOnHoverDirection["LEFT"] = "left";
   ScrollOnHoverDirection["RIGHT"] = "right";
+  ScrollOnHoverDirection["TOP"] = "top";
 })(ScrollOnHoverDirection || (ScrollOnHoverDirection = {}));

package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout;
+var _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
 import { ScrollOnHoverDirection, } from './kup-scroll-on-hover-declarations';
 const dom = document.documentElement;
 /**
@@ -23,6 +23,7 @@ export class KupScrollOnHover {
    * @param {number} step - The amount in pixels for each scroll recursion.
    */
   constructor(delay, step) {
+    _KupScrollOnHover_instances.add(this);
     _KupScrollOnHover_arrowsContainer.set(this, void 0);
     _KupScrollOnHover_leftArrows.set(this, void 0);
     _KupScrollOnHover_rightArrows.set(this, void 0);
@@ -34,42 +35,32 @@ export class KupScrollOnHover {
     this.delay = delay ? delay : 500;
     this.managedElements = new Set();
     this.step = step ? step : 50;
-    __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_rAF, null, "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
-    }
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
-    }
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-scroll-on-hover', '');
-    this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
-    document.body.appendChild(this.container);
   }
   /**
    * Watches the given element in order to trigger the scroll on hover when conditions are met.
    * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
    * @param {KupScrollOnHoverElement} el - Element to watch.
+   * @param {boolean} vertical - Enables vertical scroll.
+   * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
    */
-  register(el) {
+  register(el, vertical, percentages) {
+    if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
+      __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
+    }
     el.style.overflowX = 'auto';
     el.scrollOnHover = {
       active: false,
       children: el.querySelectorAll('.hover-scrolling-child'),
+      percentages: percentages
+        ? percentages
+        : { back: 0.1, forward: 0.9 },
       rect: null,
+      vertical: vertical || null,
       x: 0,
       y: 0,
     };
@@ -114,14 +105,19 @@ export class KupScrollOnHover {
     if (el.scrollOnHover.active || __classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f")) {
       return;
     }
+    let trueHeight = el.clientHeight;
+    if (trueHeight === 0) {
+      trueHeight = el.offsetHeight;
+    }
     let trueWidth = el.clientWidth;
     if (trueWidth === 0) {
       trueWidth = el.offsetWidth;
     }
     if (el.scrollWidth > trueWidth + 10) {
       if (trueWidth !== 0 && !el.scrollOnHover.active) {
-        const percRight = trueWidth - trueWidth * 0.1;
-        const percLeft = trueWidth - trueWidth * 0.9;
+        const percRight = trueWidth - trueWidth * el.scrollOnHover.percentages.back;
+        const percLeft = trueWidth -
+          trueWidth * el.scrollOnHover.percentages.forward;
         const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
         const maxScrollLeft = el.scrollWidth - trueWidth;
         const direction = elOffset < percLeft && el.scrollLeft !== 0
@@ -148,6 +144,28 @@ export class KupScrollOnHover {
         }
       }
     }
+    if (el.scrollOnHover.vertical && el.scrollHeight > trueHeight + 10) {
+      if (trueHeight !== 0 && !el.scrollOnHover.active) {
+        const percBottom = trueHeight - trueHeight * el.scrollOnHover.percentages.back;
+        const percTop = trueHeight -
+          trueHeight * el.scrollOnHover.percentages.forward;
+        const elOffset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        const maxScrollTop = el.scrollHeight - trueHeight;
+        const direction = elOffset < percTop && el.scrollTop !== 0
+          ? ScrollOnHoverDirection.TOP
+          : elOffset > percBottom && el.scrollTop !== maxScrollTop
+            ? ScrollOnHoverDirection.BOTTOM
+            : null;
+        if (direction) {
+          __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
+            el.scrollOnHover.active = true;
+            __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+              dom.ketchup.scrollOnHover.run(el, maxScrollTop, percBottom, percTop, direction);
+            }), "f");
+          }, this.delay), "f");
+        }
+      }
+    }
   }
   /**
    * When called, this function stops the scrolling process.
@@ -171,25 +189,51 @@ export class KupScrollOnHover {
    * The actual recursive scroll function.
    * @param {KupScrollOnHoverElement} el - The scrolled element.
    * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
-   * @param {number} percRight - Range of the right scrollable area.
-   * @param {number} percLeft - Range of the left scrollable area.
+   * @param {number} percForward - Range of the right (or bottom) area.
+   * @param {number} percBack - Range of the left (or top) scrollable area.
    * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
    */
-  run(el, maxScrollLeft, percRight, percLeft, direction) {
+  run(el, maxScrollLeft, percForward, percBack, direction) {
     if (!el.scrollOnHover.active) {
       this.stop(el);
       return;
     }
-    const offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-    if (offset > percLeft && offset < percRight) {
+    let offset = 0;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM:
+      case ScrollOnHoverDirection.TOP: {
+        offset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+      case ScrollOnHoverDirection.LEFT:
+      case ScrollOnHoverDirection.RIGHT: {
+        offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+    }
+    if (direction === ScrollOnHoverDirection.RIGHT &&
+      percForward > offset) {
+      this.stop(el);
+      return;
+    }
+    if (direction === ScrollOnHoverDirection.LEFT && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.RIGHT && percRight > offset) {
+    if (direction === ScrollOnHoverDirection.TOP && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.LEFT && percLeft < offset) {
+    if (direction === ScrollOnHoverDirection.BOTTOM &&
+      percForward > offset) {
       this.stop(el);
       return;
     }
@@ -197,27 +241,49 @@ export class KupScrollOnHover {
       this.updateChildren(el);
     }
     let arrow;
-    if (direction === ScrollOnHoverDirection.LEFT) {
-      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
-      if (el.scrollLeft === 0) {
-        this.stop(el);
-        return;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM: {
+        arrow = [];
+        if (el.scrollTop === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop += this.step;
+        break;
       }
-      el.scrollLeft -= this.step;
-    }
-    else {
-      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
-      if (el.scrollLeft === maxScrollLeft) {
-        this.stop(el);
-        return;
+      case ScrollOnHoverDirection.LEFT: {
+        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
+        if (el.scrollLeft === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft -= this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.RIGHT: {
+        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
+        if (el.scrollLeft === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft += this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.TOP: {
+        arrow = [];
+        if (el.scrollTop === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop -= this.step;
+        break;
       }
-      el.scrollLeft += this.step;
     }
     for (let i = 0; i < arrow.length; i++) {
       arrow[i].classList.add('kup-animated');
     }
     __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-      dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+      dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percForward, percBack, direction);
     }), "f");
   }
   /**
@@ -230,4 +296,24 @@ export class KupScrollOnHover {
     }
   }
 }
-_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap();
+_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap(), _KupScrollOnHover_instances = new WeakSet(), _KupScrollOnHover_initArrows = function _KupScrollOnHover_initArrows() {
+  __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
+  __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
+  __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
+  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
+  }
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
+  }
+  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
+  this.container = document.createElement('div');
+  this.container.setAttribute('kup-scroll-on-hover', '');
+  this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
+  document.body.appendChild(this.container);
+};

package/dist/collection/utils/filters/filters-rows.js

@@ -1,13 +1,14 @@
-import { SortMode } from '../../components/kup-data-table/kup-data-table-declarations';
-import { compareValues, getCellValueForDisplay, getColumnByName, getValueForDisplay, getValueForDisplay2, } from '../cell-utils';
+import { getCellValueForDisplay, getColumnByName, getValueForDisplay, } from '../cell-utils';
 import { Filters } from './filters';
 import { FiltersColumnMenu } from './filters-column-menu';
 import { treeMainColumnName } from '../../components/kup-tree/kup-tree-declarations';
 import { KupObjects } from '../../managers/kup-objects/kup-objects';
+import { KupData } from '../../managers/kup-data/kup-data';
 const dom = document.documentElement;
 const kupObjects = dom.ketchup
   ? dom.ketchup.objects
   : new KupObjects();
+const kupData = dom.ketchup ? dom.ketchup.data : new KupData();
 /**
  * Filtering algorithms related to data-table rows.
  * @module FiltersRows
@@ -231,26 +232,6 @@ export class FiltersRows extends Filters {
     for (let i = 0; i < checkboxes.length; i++) {
       values.push(checkboxes[i]);
     }
-    this.extractColumnValues(tmpRows, column, values);
-    values.sort((n1, n2) => {
-      return compareValues(null, getValueForDisplay2(n1, column), null, getValueForDisplay2(n2, column), SortMode.A);
-    });
-    return values;
-  }
-  extractColumnValues(rows, column, values) {
-    /** il valore delle righe attualmente filtrate, formattato */
-    rows.forEach((row) => this.addColumnValueFromRow(values, column, row.cells[column.name]));
-    return values;
-  }
-  addColumnValueFromRow(values, column, cell) {
-    if (cell) {
-      let item = {
-        value: cell.value,
-        displayedValue: getCellValueForDisplay(column, cell),
-      };
-      if (!Filters.valuesArrayContainsValue(values, cell.value)) {
-        values.push(item);
-      }
-    }
+    return kupData.cell.getUnivocalValue({ rows: tmpRows }, column, true);
   }
 }

package/dist/collection/utils/filters/filters-tree-items.js

@@ -1,6 +1,7 @@
 import { treeMainColumnName, } from '../../components/kup-tree/kup-tree-declarations';
 import { FiltersColumnMenu } from './filters-column-menu';
 import { FiltersRows } from './filters-rows';
+import { addColumnValueFromRow } from '../../managers/kup-data/kup-data-cell-helper';
 /**
  * Filtering algorithms related to tree items rows.
  * @module FiltersTreeItems
@@ -70,7 +71,7 @@ export class FiltersTreeItems extends FiltersRows {
       });
     }
   }
-  extractColumnValues(rows, column, values) {
+  extractColumnValues(rows, column, values, univocal) {
     if (rows == null || rows.length == 0) {
       return;
     }
@@ -82,8 +83,8 @@ export class FiltersTreeItems extends FiltersRows {
         value: node.value,
       };
       if (node.visible) {
-        this.addColumnValueFromRow(values, column, cellsHolder[column.name]);
-        this.extractColumnValues(node.children, column, values);
+        addColumnValueFromRow(values, column, cellsHolder[column.name], univocal);
+        this.extractColumnValues(node.children, column, values, univocal);
       }
     });
     return values;