@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,8 +1,8 @@
 import { h } from '@stencil/core';
-import { FChipType, } from '../f-chip/f-chip-declarations';
+import { FChipType } from '../f-chip/f-chip-declarations';
 import { FImage } from '../f-image/f-image';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupThemeColorValues, KupThemeIconValues, } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues, KupThemeIconValues, } from '../../managers/kup-theme/kup-theme-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -28,95 +28,84 @@ export const FChip = (props) => {
 /*-------------------------------------------------*/
 function createChipList(props, isChoice, isFilter, isInput) {
   const chipList = [];
-  let chipEl;
-  if (props.dataNew && props.dataNew.length > 0) {
-    props.data = treeNode2Data(props.dataNew);
-  }
   for (let i = 0; props.data && i < props.data.length; i++) {
-    // could happen due to functions that change the data (such as transposition, etc)
-    if (!props.data[i]) {
-      continue;
-    }
-    let componentClass = 'chip';
-    let iconEl = [];
-    let iconClass = 'chip__icon chip__icon--leading';
-    if (isFilter || isChoice) {
-      if (props.data[i].checked) {
-        componentClass += ' chip--selected';
-        if (isFilter) {
-          iconClass += ' chip__icon--leading-hidden';
+    const chipGroup = [];
+    recursive(props.data[i], 0);
+    chipList.push(h("div", { class: "chip-set__item" }, ...chipGroup));
+    function recursive(chip, indent) {
+      const hasChildren = !!(chip.children && chip.children.length > 0);
+      const showChildren = !!(hasChildren && chip.isExpanded);
+      const indentStyle = {
+        ['--kup_chip_indent_offset']: indent.toString(),
+      };
+      chipGroup.push(h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
+          ? 'chip-set__wrapper--hidden-children'
+          : ''}` },
+        h("div", { class: "chip-set__indent", style: indentStyle }),
+        hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
+            props.onExpansionClick[i]
+            ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
+            : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
+            '/' +
+            dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
+            ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null,
+        createChip(chip)));
+      if (showChildren) {
+        for (let index = 0; index < chip.children.length; index++) {
+          if (chip.children[index]) {
+            recursive(chip.children[index], indent + 1);
+          }
         }
       }
     }
-    if (props.data[i].icon) {
-      const p = {
-        color: isChoice && props.data[i].checked
-          ? `var(${KupThemeColorValues.PRIMARY})`
-          : `var(${KupThemeColorValues.TEXT})`,
-        resource: props.data[i].icon,
-        sizeX: '18px',
-        sizeY: '18px',
-        wrapperClass: iconClass,
-      };
-      iconEl.push(h(FImage, Object.assign({}, p)));
-    }
-    if (isFilter) {
-      iconEl.push(h("span", { class: "chip__checkmark" },
-        h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
-          h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
-    }
-    chipEl = (h("div", { class: componentClass, "data-value": props.data[i].value, onClick: props.onClick && props.onClick[i] ? props.onClick[i] : null, role: "row" },
-      iconEl,
-      h("span", { role: "gridcell" },
-        h("span", { role: "button", tabindex: i, class: "chip__primary-action", 
-          // @ts-ignore
-          value: props.data[i].value, checked: props.data[i].checked, onBlur: props.onBlur && props.onBlur[i]
-            ? props.onBlur[i]
-            : null, onFocus: props.onFocus && props.onFocus[i]
-            ? props.onFocus[i]
-            : null },
-          h("span", { class: "chip__text" }, props.data[i].label))),
-      isInput ? (h("span", { role: "gridcell" },
-        h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
-            ? props.onIconClick[i]
-            : null }))) : undefined));
-    chipList.push(chipEl);
-  }
-  return chipList;
-}
-/**
- * This function converts TreeNode[] to FChipData[]. This is valid until FChipData is removed.
- *
- * @return {FChipData} Array of FChipData.
- */
-function treeNode2Data(dataNew) {
-  function children(TreeNode) {
-    for (let index = 0; index < TreeNode.children.length; index++) {
-      const node = TreeNode.children[index];
-      data.push({
-        icon: TreeNode.children[index].icon,
-        label: TreeNode.children[index].value,
-        obj: TreeNode.children[index].obj,
-        value: TreeNode.children[index].id,
-      });
-      if (node.children) {
-        children(node);
+    function createChip(chip) {
+      let componentClass = `chip `;
+      let iconEl = [];
+      let iconClass = 'chip__icon chip__icon--leading';
+      if (isFilter || isChoice) {
+        if (chip.checked) {
+          componentClass += ' chip--selected';
+          if (isFilter) {
+            iconClass += ' chip__icon--leading-hidden';
+          }
+        }
       }
+      if (chip.icon) {
+        const p = {
+          color: isChoice && chip.checked
+            ? `var(${KupThemeColorValues.PRIMARY})`
+            : `var(${KupThemeColorValues.TEXT})`,
+          resource: chip.icon,
+          sizeX: '18px',
+          sizeY: '18px',
+          wrapperClass: iconClass,
+        };
+        iconEl.push(h(FImage, Object.assign({}, p)));
+      }
+      if (isFilter) {
+        iconEl.push(h("span", { class: "chip__checkmark" },
+          h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
+            h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
+      }
+      return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
+          ? props.onClick[i].bind(props.onClick[i], chip)
+          : null, role: "row", title: chip.title ? chip.title : '' },
+        h("span", { class: "chip-set__indent" }),
+        iconEl,
+        h("span", { role: "gridcell" },
+          h("span", { role: "button", tabindex: i, class: "chip__primary-action", 
+            // @ts-ignore
+            value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
+              ? props.onBlur[i].bind(props.onBlur[i], chip)
+              : null, onFocus: props.onFocus && props.onFocus[i]
+              ? props.onFocus[i].bind(props.onFocus[i], chip)
+              : null },
+            h("span", { class: "chip__text" }, chip.value))),
+        isInput ? (h("span", { role: "gridcell" },
+          h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
+              ? props.onIconClick[i].bind(props.onIconClick[i], chip)
+              : null }))) : null));
     }
   }
-  const data = [];
-  for (let index = 0; index < dataNew.length; index++) {
-    const node = dataNew[index];
-    data.push({
-      icon: node.icon,
-      label: node.value,
-      obj: node.obj,
-      value: node.id,
-    });
-    if (node.children) {
-      children(dataNew[index]);
-    }
-  }
-  dom.ketchup.debug.logMessage('f-chip', 'Chip data was deducted from a TreeNode[] structure (experimental feature).', KupDebugCategory.WARNING);
-  return data;
+  return chipList;
 }

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

@@ -1,6 +1,6 @@
 import { FImageShape } from './f-image-declarations';
 import { getAssetPath, h } from '@stencil/core';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -40,7 +40,7 @@ export const FImage = (props) => {
   }
   return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }),
     el,
-    badgeCollection));
+    ...badgeCollection));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */

package/dist/collection/f-components/f-paginator/f-paginator-declarations.js

@@ -0,0 +1,5 @@
+export var FPaginatorMode;
+(function (FPaginatorMode) {
+  FPaginatorMode["SIMPLE"] = "simple";
+  FPaginatorMode["FULL"] = "full";
+})(FPaginatorMode || (FPaginatorMode = {}));

package/dist/collection/f-components/f-paginator/f-paginator-utils.js

@@ -0,0 +1,28 @@
+import { isNumber } from '../../utils/utils';
+export function pageChange(pageNumber, max, perPage) {
+  if (isNumber(pageNumber)) {
+    const numberOfPages = Math.ceil(max / perPage);
+    let tmpNewPage = pageNumber;
+    if (tmpNewPage > numberOfPages) {
+      tmpNewPage = numberOfPages;
+    }
+    if (tmpNewPage < 1) {
+      tmpNewPage = 1;
+    }
+    return tmpNewPage;
+  }
+  return null;
+}
+export function rowsPerPageChange(rowsNumber, max) {
+  if (isNumber(rowsNumber)) {
+    let tmpRowsPerPage = rowsNumber;
+    if (tmpRowsPerPage > max) {
+      tmpRowsPerPage = max;
+    }
+    if (tmpRowsPerPage < 1) {
+      tmpRowsPerPage = 1;
+    }
+    return tmpRowsPerPage;
+  }
+  return null;
+}

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

@@ -0,0 +1,91 @@
+import { h } from '@stencil/core';
+import { KupLanguageGeneric, KupLanguagePage, KupLanguageRow, } from '../../managers/kup-language/kup-language-declarations';
+import { FButton } from '../f-button/f-button';
+import { FButtonStyling } from '../f-button/f-button-declarations';
+import { FPaginatorMode } from './f-paginator-declarations';
+const dom = document.documentElement;
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+export const FPaginator = (props) => {
+  const maxNumberOfPage = Math.ceil(props.max / props.perPage);
+  const pageItems = getPageItems(props, maxNumberOfPage);
+  const rowsPerPageItems = getRowsItems(props);
+  const dataPageSelector = {
+    'kup-list': {
+      data: pageItems,
+    },
+    'kup-text-field': {
+      label: dom.ketchup.language.translate(KupLanguagePage.PAGE),
+      helper: dom.ketchup.language.translate(KupLanguagePage.TOTAL) +
+        `: ${maxNumberOfPage}`,
+      helperWhenFocused: true,
+      inputType: 'number',
+      max: maxNumberOfPage,
+      min: 1,
+    },
+  };
+  const dataRowsSelector = {
+    'kup-list': {
+      data: rowsPerPageItems,
+    },
+    'kup-text-field': {
+      label: dom.ketchup.language.translate(KupLanguageRow.ROWS) +
+        ' / ' +
+        dom.ketchup.language.translate(KupLanguagePage.PAGE),
+      helper: dom.ketchup.language.translate(KupLanguageRow.TOTAL) +
+        `: ${props.max}`,
+      helperWhenFocused: true,
+      inputType: 'number',
+      max: props.max,
+      min: 1,
+    },
+  };
+  return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null,
+    h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
+    props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null,
+    h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
+    props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), styling: FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
+};
+function getPageItems(props, maxNumberOfPage) {
+  const pageItems = [];
+  for (let i = 1; i <= maxNumberOfPage; i++) {
+    const selected = i == props.currentPage;
+    pageItems.push({
+      text: i.toString(),
+      value: i.toString(),
+      selected: selected,
+    });
+  }
+  return pageItems;
+}
+function getRowsItems(props) {
+  const rowsPerPageItems = [];
+  let i = props.perPage;
+  if (i === 0) {
+    return rowsPerPageItems;
+  }
+  while (i < props.max) {
+    const selected = i == props.perPage;
+    rowsPerPageItems.push({
+      text: i.toString(),
+      value: i.toString(),
+      selected: selected,
+    });
+    i = i * 2;
+  }
+  const selected = props.max == props.perPage;
+  rowsPerPageItems.push({
+    text: props.max.toString(),
+    value: props.max.toString(),
+    selected: selected,
+  });
+  return rowsPerPageItems;
+}
+function isNextPageDisabled(props) {
+  return props.currentPage * props.perPage >= props.max;
+}
+function isPrevPageDisabled(props) {
+  return props.currentPage == 1;
+}

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

@@ -1,5 +1,5 @@
 import { getAssetPath, h } from '@stencil/core';
-import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -35,7 +35,7 @@ function setContent(props) {
         webkitMask: svg,
       };
     }
-    iconEl = (h("span", { tabindex: "0", style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
+    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
   }
   const classObj = {
     'is-clearable': props.isClearable,
@@ -56,7 +56,7 @@ function setContent(props) {
     !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, 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 })),
-    props.isClearable ? (h("span", { tabindex: "1", class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
+    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,
     isOutlined ? (h("div", { class: "mdc-notched-outline" },
@@ -65,7 +65,7 @@ function setContent(props) {
       h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
 }
 function setHelper(props) {
-  if (props.helperEnabled) {
+  if (props.helperEnabled !== false) {
     if (props.helper) {
       const classObj = {
         'mdc-text-field-helper-text': true,

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

@@ -0,0 +1,52 @@
+const dom = document.documentElement;
+/**
+ * Finds all the cells matching the filters criteria in the input dataset.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {KupDataFindCellFilters} filters - Filters of the research.
+ * @returns {KupDataCell[]}  Array of cells fetched after applying the filters.
+ */
+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.
+ */
+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);
+      }
+    }
+  }
+  return result;
+}
+/**
+ * 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.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {KupDataCell} cell - New cell.
+ * @param {string[]} columns - Columns to be handled.
+ * @returns {KupDataCell[]} Replaced cells.
+ */
+export function replaceCell(dataset, cell, columns) {
+  const replaced = [];
+  for (let index = 0; index < dataset.rows.length; index++) {
+    const row = dataset.rows[index];
+    const cells = row.cells;
+    for (const key in cells) {
+      if (!columns || !columns.length || columns.includes(key)) {
+        cells[key] = Object.assign({}, cell);
+        replaced.push(cells[key]);
+      }
+    }
+  }
+  return replaced;
+}