@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

package/dist/collection/components/kup-data-table/kup-data-table-helper.js

@@ -1,7 +1,8 @@
 import { SortMode, TotalMode, } from './kup-data-table-declarations';
-import { stringToNumber } from '../../utils/utils';
+import { isNumber, stringToNumber } from '../../utils/utils';
 import { getCellValueForDisplay, getColumnByName, compareCell, } from '../../utils/cell-utils';
 import { FiltersRows } from '../../utils/filters/filters-rows';
+import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
 const dom = document.documentElement;
 export function sortRows(rows = [], sort = []) {
   if (!rows || rows.length === 0) {
@@ -567,8 +568,9 @@ export function calcTotals(rows = [], totals = {}) {
   }
   const keys = Object.keys(totals);
   const footerRow = {};
+  const dateColumns = new Array();
   // if there are only COUNT, no need to loop on rows
-  let onlyCount = keys.length === 0 &&
+  let onlyCount = keys.length === 0 ||
     keys.every((key) => totals[key] === TotalMode.COUNT);
   if (onlyCount) {
     keys.forEach((columnName) => (footerRow[columnName] = rows.length));
@@ -631,35 +633,40 @@ export function calcTotals(rows = [], totals = {}) {
             // TODO DRY the MIN and MAX functions
           }
           else if (dom.ketchup.objects.isDate(cell.obj)) {
-            const momentValue = cell.obj
-              ? dom.ketchup.objects.parseDate(cell.obj)
-              : dom.ketchup.dates.toDayjs(cell.value);
+            if (dateColumns.indexOf(key) == -1) {
+              dateColumns.push(key);
+            }
+            const momentValue = dom.ketchup.dates.toDayjs(cell.value);
             if (dom.ketchup.dates.isValid(momentValue)) {
               const cellValue = dom.ketchup.dates.toDate(momentValue);
-              const currentFooterValue = footerRow[key];
+              const currentFooterValue = footerRow[key]
+                ? dom.ketchup.dates.toDate(dom.ketchup.dates.toDayjs(footerRow[key]))
+                : null;
               switch (true) {
                 case totals[key] === TotalMode.MIN:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    moments.push(currentFooterValue);
                     footerRow[key] =
-                      dom.ketchup.dates.format(dom.ketchup.dates.min(moments));
+                      dom.ketchup.dates.format(dom.ketchup.dates.min(moments), KupDatesFormats.ISO_DATE);
                   }
                   else {
-                    footerRow[key] = cellValue;
+                    footerRow[key] =
+                      dom.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                   }
                   break;
                 case totals[key] === TotalMode.MAX:
                   if (currentFooterValue) {
                     let moments = [];
                     moments.push(cellValue);
-                    moments.push(dom.ketchup.dates.format(currentFooterValue));
+                    moments.push(currentFooterValue);
                     footerRow[key] =
-                      dom.ketchup.dates.format(dom.ketchup.dates.max(moments));
+                      dom.ketchup.dates.format(dom.ketchup.dates.max(moments), KupDatesFormats.ISO_DATE);
                   }
                   else {
-                    footerRow[key] = cellValue;
+                    footerRow[key] =
+                      dom.ketchup.dates.format(cellValue, KupDatesFormats.ISO_DATE);
                   }
                   break;
                 default:
@@ -676,25 +683,30 @@ export function calcTotals(rows = [], totals = {}) {
         }
       });
     });
-    // fixing MATH, AVERAGE and COUNT
-    for (let key of keys) {
-      switch (true) {
-        case totals[key] === TotalMode.AVERAGE:
-          const sum = footerRow[key];
-          if (sum && rows.length > 0) {
-            footerRow[key] = sum / rows.length;
-          }
-          break;
-        case totals[key] === TotalMode.COUNT:
-          footerRow[key] = rows.length;
-          break;
-        case totals[key].indexOf(TotalMode.MATH) == 0:
-          footerRow[key] = dom.ketchup.math.formulas.custom(totals[key].substring(TotalMode.MATH.length), footerRow);
-          break;
-        default:
-          break;
+  }
+  // fixing MATH, AVERAGE and COUNT
+  for (let key of keys) {
+    switch (true) {
+      case totals[key] === TotalMode.AVERAGE:
+        const sum = footerRow[key];
+        if (sum && rows.length > 0) {
+          footerRow[key] = sum / rows.length;
+        }
+        break;
+      case totals[key] === TotalMode.COUNT:
+        footerRow[key] = rows.length;
+        break;
+      case totals[key].indexOf(TotalMode.MATH) == 0:
+        footerRow[key] = dom.ketchup.math.formulas.custom(totals[key].substring(TotalMode.MATH.length), footerRow);
+        break;
+      default:
+        break;
+    }
+    if (footerRow[key]) {
+      if (dateColumns.indexOf(key) != -1) {
+        footerRow[key] = dom.ketchup.dates.format(footerRow[key]);
       }
-      if (footerRow[key]) {
+      else if (isNumber(footerRow[key])) {
         footerRow[key] = +footerRow[key].toFixed(2);
       }
     }

package/dist/collection/components/kup-data-table/kup-data-table-state.js

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -3338,20 +3338,21 @@ export class KupDataTable {
     }
     let groupChips = null;
     if (this.isGrouping()) {
-      const chipsData = this.groups.map((group) => {
+      const chipsData = [];
+      for (let index = 0; index < this.groups.length; index++) {
+        const group = this.groups[index];
         const column = getColumnByName(this.getColumns(), group.column);
         if (column) {
-          const a = {
+          chipsData.push({
             value: column.title,
             id: column.name,
             checked: true,
-          };
-          return a;
+          });
         }
         else {
-          return null;
+          this.kupManager.debug.logMessage(this, "Grouped for a non-existent column! (" + group.column + ")", KupDebugCategory.WARNING);
         }
-      });
+      }
       if (chipsData.length > 0) {
         const props = {
           data: chipsData,

package/dist/collection/components/kup-drawer/kup-drawer.css

@@ -37,15 +37,13 @@
 }
 
 .backdrop {
+  background: var(--kup_drawer_backdrop);
+  display: none;
+  height: 100%;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  background: var(--kup_drawer_backdrop);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--kup_drawer_transition) ease-in;
   z-index: var(--kup-drawer-zindex);
 }
 
@@ -87,8 +85,7 @@
   left: 0;
 }
 :host([kup-opened]) .backdrop {
-  opacity: 1;
-  pointer-events: all;
+  display: block;
 }
 
 /*-------------------------------------------------*/

package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js

@@ -326,6 +326,7 @@ export class KupDropdownButton {
         ? true
         : false,
       styling: this.styling ? this.styling : FButtonStyling.RAISED,
+      title: this.rootElement.title,
     };
     if (!this.dropdownOnly) {
       buttons.push(h(FButton, Object.assign({}, props, { icon: this.icon ? this.icon : null, label: this.label ? this.label : null, trailingIcon: this.trailingIcon ? true : false, wrapperClass: "dropdown-button__primary-action", onClick: () => this.onKupClick(), onBlur: () => this.onKupBlur(), onFocus: () => this.onKupFocus() })));

package/dist/collection/components/kup-echart/kup-echart.js

@@ -1063,29 +1063,29 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     if (type == KupEchartTypes.GAUSSIAN) {
       if (!__classPrivateFieldGet(this, _KupEchart_kupManager, "f").objects.isNumber(column.obj)) {
         const newDataset = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.distinct(this.data, [column.name]);
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(newDataset, [
-          column.name,
-        ]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(newDataset, column);
         __classPrivateFieldGet(this, _KupEchart_gaussianDatasets, "f")[column.name] = newDataset;
       }
       else {
-        values = y[key];
+        values = [{ value: y[key] }];
       }
     }
     else {
       if (needSortDataset) {
         // if there is only one series other than the Gaussian then I apply the sorting algorithm that arranges the data in "mountain"
         __classPrivateFieldSet(this, _KupEchart_sortedDataset, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.sort(this.data, 'normalDistribution', column.name), "f");
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), [column.name]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(__classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"), column);
         x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this, __classPrivateFieldGet(this, _KupEchart_sortedDataset, "f"));
       }
       else {
-        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, [
-          column.name,
-        ]);
+        values = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.cell.getValue(this.data, column);
       }
     }
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, values, key, mixedSeries, needSortDataset);
+    const justValues = new Array();
+    for (let i = 0; i < values.length; i++) {
+      justValues.push(values[i].value);
+    }
+    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_addSeries).call(this, type, series, justValues, key, mixedSeries, needSortDataset);
     i++;
   }
   // "any" because type is mismanaged inside echarts library

package/dist/collection/components/kup-family-tree/kup-family-tree-declarations.js

@@ -0,0 +1,14 @@
+/**
+ * Props of the kup-family-tree component.
+ * Used to export every prop in an object.
+ */
+export var KupFamilyTreeProps;
+(function (KupFamilyTreeProps) {
+  KupFamilyTreeProps["autofitOnExpand"] = "The component will autofit everytime a node is expanded.";
+  KupFamilyTreeProps["autofitOnLoad"] = "The component's initial render will fit the container by invoking the runAutofit method.";
+  KupFamilyTreeProps["collapsible"] = "Nodes can be expanded/collapsed.";
+  KupFamilyTreeProps["customStyle"] = "Custom style of the component.";
+  KupFamilyTreeProps["data"] = "Actual data of the component";
+  KupFamilyTreeProps["layout"] = "Layout of the boxes.";
+  KupFamilyTreeProps["stackedLeaves"] = "Child nodes that have no children are arranged vertically.";
+})(KupFamilyTreeProps || (KupFamilyTreeProps = {}));

package/dist/collection/components/kup-family-tree/kup-family-tree.css

@@ -0,0 +1,171 @@
+/**
+* //TODO: Handle height properly once understood whether to use kup-box or not
+* @prop --kup-familytree-item-background-color: Sets the background color of the items.
+* @prop --kup-familytree-item-color: Sets the color of the items.
+* @prop --kup-familytree-item-height: Sets the height of the items.
+* @prop --kup-familytree-item-h-padding: Sets the horizontal padding of items.
+* @prop --kup-familytree-item-v-padding: Sets the vertical padding of items.
+* @prop --kup-familytree-item-width: Sets the width of the items.
+* @prop --kup-familytree-lines-color: Sets the color of the lines.
+*/
+:host {
+  --kup_familytree_item_background_color: var(
+    --kup-familytree-item-background-color,
+    var(--kup-background-color)
+  );
+  --kup_familytree_item_color: var(
+    --kup-familytree-item-color,
+    var(--kup-text-color)
+  );
+  --kup_familytree_item_height: var(--kup-familytree-item-height, 80px);
+  --kup_familytree_item_h_padding: var(--kup-familytree-item-h-padding, 8px);
+  --kup_familytree_item_v_padding: var(--kup-familytree-item-v-padding, 10px);
+  --kup_familytree_item_width: var(--kup-familytree-item-width, 280px);
+  --kup_familytree_lines_color: var(
+    --kup-familytree-lines-color,
+    var(--kup-border-color)
+  );
+  display: block;
+  overflow: hidden;
+}
+
+.family-tree {
+  cursor: grab;
+  display: flex;
+  transform: scale(var(--kup_familytree_scale, 1));
+  transform-origin: 0px 0px;
+}
+.family-tree--dragging {
+  cursor: grabbing;
+}
+.family-tree__node {
+  border-collapse: collapse;
+  margin: auto;
+}
+.family-tree__node--stacked {
+  margin-bottom: 4px;
+}
+.family-tree__node__staff {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  transform: translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) ) ));
+}
+.family-tree__node__staff__item {
+  padding: var(--kup_familytree_item_v_padding);
+  text-align: left;
+}
+.family-tree__node__staff__item:before {
+  border-top: 2px solid var(--kup_familytree_lines_color);
+  content: "";
+  position: absolute;
+  transform: translateX(calc(100% + 2px)) translateY(calc(var(--kup_familytree_item_height) / 2));
+  width: var(--kup_familytree_item_h_padding);
+}
+.family-tree__node td {
+  vertical-align: top;
+  padding: 0;
+}
+.family-tree__line--left {
+  border-left: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--placeholder {
+  height: calc(var(--kup_familytree_item_height) / 2);
+}
+.family-tree__line--staff {
+  height: calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) );
+}
+.family-tree__line--right {
+  border-right: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--top {
+  border-top: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--vertical {
+  background-color: var(--kup_familytree_lines_color);
+  margin-left: auto;
+  margin-right: auto;
+  width: 2px;
+}
+.family-tree__item {
+  display: flex;
+}
+.family-tree__item__wrapper {
+  margin: auto;
+}
+.family-tree__item__wrapper kup-box {
+  margin: 0 auto;
+  overflow: hidden;
+  padding: 0 18px;
+  width: var(--kup_familytree_item_width);
+  z-index: 1;
+}
+.family-tree__item__wrapper .f-button {
+  --kup-button-primary-color: var(--kup-text-color);
+  --kup-button-primary-color-rgb: var(--kup-text-color-rgb);
+  --kup-button-primary-color-h: var(--kup-text-color-h);
+  --kup-button-primary-color-s: var(--kup-text-color-s);
+  --kup-button-primary-color-l: var(--kup-text-color-l);
+  margin: 0 auto;
+  width: max-content;
+}
+.family-tree__item__wrapper .f-button button {
+  height: 32px;
+  width: 32px;
+}
+.family-tree__item__layout {
+  background-color: var(--kup_familytree_item_background_color);
+  border: 1px solid var(--kup_familytree_lines_color);
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  height: var(--kup_familytree_item_height);
+  margin: 0 18px;
+  width: var(--kup_familytree_item_width);
+}
+.family-tree__item__layout--1 {
+  justify-content: center;
+  color: var(--kup_familytree_item_color);
+}
+.family-tree__item__layout--1 > .family-tree__item__layout__text__title {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.family-tree__item__layout--2 {
+  background-color: var(--kup_familytree_item_background_color);
+  justify-content: flex-start;
+}
+.family-tree__item__layout__color {
+  background-color: var(--kup-secondary-color);
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  height: 100%;
+  width: 10px;
+}
+.family-tree__item__layout__image {
+  display: flex;
+  margin: auto 10px;
+}
+.family-tree__item__layout__image img {
+  border-radius: 50px;
+  object-fit: cover;
+}
+.family-tree__item__layout__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.family-tree__item__layout__text__title {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+.family-tree__item__layout__text__subtitle {
+  font-size: 14px;
+}
+.family-tree__item__layout__text__title, .family-tree__item__layout__text__subtitle {
+  max-width: calc(var(--kup_familytree_item_width) - 30%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}