@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -8,7 +8,7 @@ export const FSwitch = (props) => {
     'switch--checked': props.checked,
     'switch--disabled': props.disabled,
   };
-  return (h("div", Object.assign({ class: `f-switch--wrapper ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+  return (h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
     h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
       h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
         h("div", { class: "switch__track" }),

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

@@ -2,7 +2,7 @@ import { MDCTextField, MDCTextFieldCharacterCounter, MDCTextFieldHelperText, MDC
 import { MDCFormField } from '@material/form-field';
 /**
  * Instantiates Material Design text field component.
- * @param el - Must be the f-component wrapper (.f-text-field--wrapper)
+ * @param el - Must be the f-component wrapper (.f-text-field)
  * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
  */
 export function FTextFieldMDC(el) {

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

@@ -3,12 +3,14 @@ import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-export const FTextField = (props) => {
-  return (h("div", Object.assign({ class: `f-text-field--wrapper ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
-    setContent(props),
-    setHelper(props),
-    h("label", null, props.label),
-  ])) : ([setContent(props), setHelper(props)])));
+export const FTextField = (props, children) => {
+  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
+      setContent(props),
+      setHelper(props),
+      h("label", null, props.label),
+    ])) : ([setContent(props), setHelper(props)]),
+    children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
@@ -63,23 +65,25 @@ function setContent(props) {
       h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
 }
 function setHelper(props) {
-  if (props.helper) {
-    const classObj = {
-      'mdc-text-field-helper-text': true,
-      'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
-    };
-    return (h("div", { class: "mdc-text-field-helper-line" },
-      h("div", { class: classObj }, props.helper),
-      props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
-        "'0 / ' + ",
-        props.maxLength.toString())) : undefined));
-  }
-  else {
-    if (props.maxLength && !props.textArea) {
+  if (props.helperEnabled) {
+    if (props.helper) {
+      const classObj = {
+        'mdc-text-field-helper-text': true,
+        'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
+      };
       return (h("div", { class: "mdc-text-field-helper-line" },
-        h("div", { class: "mdc-text-field-character-counter" },
+        h("div", { class: classObj }, props.helper),
+        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
           "'0 / ' + ",
-          props.maxLength)));
+          props.maxLength.toString())) : undefined));
+    }
+    else {
+      if (props.maxLength && !props.textArea) {
+        return (h("div", { class: "mdc-text-field-helper-line" },
+          h("div", { class: "mdc-text-field-character-counter" },
+            "'0 / ' + ",
+            props.maxLength)));
+      }
     }
   }
 }

package/dist/collection/utils/cell-utils.js

@@ -1,214 +1,10 @@
-import get from 'lodash/get';
 import numeral from 'numeral';
 import { stringToNumber, unformattedStringToFormattedStringNumber, unformattedStringToFormattedStringTime, unformattedStringToFormattedStringTimestamp, } from './utils';
-import { KupObjects } from './kup-objects/kup-objects';
-import { KupDates } from './kup-dates/kup-dates';
 import { KupDatesFormats } from './kup-dates/kup-dates-declarations';
 const dom = document.documentElement;
-const kupDates = dom.ketchup ? dom.ketchup.dates : new KupDates();
-const kupObjects = dom.ketchup
-  ? dom.ketchup.objects
-  : new KupObjects();
 // -------------
 // COMMONS
 // -------------
-export function getShape(cell, boxObject) {
-  let prop = get(cell, 'shape', null);
-  if (!prop && boxObject) {
-    prop = get(boxObject, 'shape', null);
-  }
-  return prop ? prop.toUpperCase() : null;
-}
-export function getValue(cell, boxObject) {
-  let prop = get(cell, 'value', null);
-  if (!prop) {
-    prop = get(boxObject, 'value', null);
-  }
-  return prop;
-}
-export function getFromConfig(cell, boxObject, propName) {
-  let prop = null;
-  if (cell && cell.data) {
-    prop = get(cell.data, propName, null);
-  }
-  if (!prop && boxObject && boxObject.config) {
-    prop = get(boxObject.config, propName, null);
-  }
-  return prop;
-}
-// -------------
-// PROGRESS BAR
-// -------------
-export function isProgressBar(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('PGB' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isProgressBar(cell.obj)));
-}
-// -------------
-// CHIP
-// -------------
-export function isChip(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('CHI' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isKupObjList(cell.obj)));
-}
-// -------------
-// IMAGE
-// -------------
-export function isImage(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('IMG' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isImage(cell.obj)));
-}
-// -------------
-// COMBO
-// -------------
-export function isCombo(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'CMB' === shape;
-}
-// -------------
-// AUTOCOMPLETE
-// -------------
-export function isAutocomplete(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'ACP' === shape;
-}
-// -------------
-// INPUT TEXT
-// -------------
-export function isInputText(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'ITX' === shape || !shape;
-}
-// -------------
-// INPUT EDITOR
-// -------------
-export function isEditor(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'EDT' === shape;
-}
-// -------------
-// RATING
-// -------------
-export function isRating(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'RTG' === shape;
-}
-// -------------
-// COLOR
-// -------------
-export function isColor(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('CLP' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isColor(cell.obj)));
-}
-// -------------
-// CHART
-// -------------
-export function isChart(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('GRA' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isChart(cell.obj)));
-}
-// -------------
-// RADIO
-// -------------
-export function isRadio(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return ('RAD' === shape ||
-    (!shape && cell && cell.obj && kupObjects.isRadio(cell.obj)));
-}
-// -------------
-// GAUGE
-// -------------
-export function isGauge(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'GAU' === shape;
-}
-// -------------
-// KNOB
-// -------------
-export function isKnob(cell, boxObject) {
-  let shape = getShape(cell, boxObject);
-  return 'KNB' === shape;
-}
-// -------------
-// BUTTON-LIST
-// -------------
-export function isButtonList(cell) {
-  let shape = getShape(cell);
-  return shape === 'BTN';
-}
-export function getCellType(cell) {
-  let obj = cell.obj;
-  if (isButtonList(cell)) {
-    return 'btn';
-  }
-  else if (kupObjects.isBar(obj)) {
-    return 'bar';
-  }
-  else if (kupObjects.isButton(obj)) {
-    return 'button';
-  }
-  else if (kupObjects.isChart(obj)) {
-    return 'chart';
-  }
-  else if (kupObjects.isCheckbox(obj)) {
-    return 'checkbox';
-  }
-  else if (isColor(cell, null)) {
-    return 'color-picker';
-  }
-  else if (isGauge(cell, null)) {
-    return 'gauge';
-  }
-  else if (isKnob(cell, null)) {
-    return 'knob';
-  }
-  else if (kupObjects.isIcon(obj)) {
-    return 'icon';
-  }
-  else if (isImage(cell, null)) {
-    return 'image';
-  }
-  else if (kupObjects.isLink(obj)) {
-    return 'link';
-  }
-  else if (isProgressBar(cell, null)) {
-    return 'progress-bar';
-  }
-  else if (isRadio(cell, null)) {
-    return 'radio';
-  }
-  else if (isRating(cell, null)) {
-    return 'rating';
-  }
-  else if (isChip(cell, null)) {
-    return 'chips';
-  }
-  else if (kupObjects.isNumber(obj)) {
-    return 'number';
-  }
-  else if (kupObjects.isDate(obj)) {
-    return 'date';
-  }
-  else if (kupObjects.isTimestamp(obj)) {
-    return 'datetime';
-  }
-  else if (kupObjects.isTime(obj)) {
-    return 'time';
-  }
-  else if (kupObjects.isTextField(obj)) {
-    return 'text-field';
-  }
-  else if (kupObjects.isVoCodver(obj)) {
-    return 'icon';
-  }
-  else {
-    return 'string';
-  }
-}
 export function getCellValueForDisplay(column, cell) {
   if (cell != null) {
     if (cell.displayedValue != null) {
@@ -247,17 +43,17 @@ export function getValueForDisplay(value, obj, decimals) {
   if (value == null || value.trim() == '') {
     return value;
   }
-  if (kupObjects.isNumber(obj)) {
+  if (dom.ketchup.objects.isNumber(obj)) {
     return unformattedStringToFormattedStringNumber(value, decimals ? decimals : -1, obj ? obj.p : '');
   }
-  if (kupObjects.isDate(obj) &&
-    kupDates.isValid(value, KupDatesFormats.ISO_DATE)) {
-    return kupDates.format(value);
+  if (dom.ketchup.objects.isDate(obj) &&
+    dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
+    return dom.ketchup.dates.format(value);
   }
-  if (kupObjects.isTime(obj)) {
-    return unformattedStringToFormattedStringTime(value, kupObjects.isTimeWithSeconds(obj), obj.t + obj.p);
+  if (dom.ketchup.objects.isTime(obj)) {
+    return unformattedStringToFormattedStringTime(value, dom.ketchup.objects.isTimeWithSeconds(obj), obj.t + obj.p);
   }
-  if (kupObjects.isTimestamp(obj)) {
+  if (dom.ketchup.objects.isTimestamp(obj)) {
     return unformattedStringToFormattedStringTimestamp(value);
   }
   return value;
@@ -302,26 +98,26 @@ export function compareValues(obj1, value1, obj2, value2, sortMode) {
   }
   let v1 = s1;
   let v2 = s2;
-  if (kupObjects.isNumber(obj1)) {
+  if (dom.ketchup.objects.isNumber(obj1)) {
     v1 = stringToNumber(s1);
     v2 = stringToNumber(s2);
   }
-  else if (kupObjects.isDate(obj1)) {
-    v1 = kupDates.toDate(kupDates.format(s1, KupDatesFormats.ISO_DATE));
-    v2 = kupDates.toDate(kupDates.format(s2, KupDatesFormats.ISO_DATE));
+  else if (dom.ketchup.objects.isDate(obj1)) {
+    v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE));
+    v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE));
   }
-  else if (kupObjects.isTime(obj1)) {
-    let manageSeconds = kupObjects.isTimeWithSeconds(obj1);
-    v1 = kupDates.toDate(kupDates.format(s1, manageSeconds
+  else if (dom.ketchup.objects.isTime(obj1)) {
+    let manageSeconds = dom.ketchup.objects.isTimeWithSeconds(obj1);
+    v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, manageSeconds
       ? KupDatesFormats.ISO_TIME
       : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
-    v2 = kupDates.toDate(kupDates.format(s2, manageSeconds
+    v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, manageSeconds
       ? KupDatesFormats.ISO_TIME
       : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
   }
-  else if (kupObjects.isTimestamp(obj1)) {
-    v1 = kupDates.toDate(kupDates.format(s1, KupDatesFormats.ISO_DATE_TIME));
-    v2 = kupDates.toDate(kupDates.format(s2, KupDatesFormats.ISO_DATE_TIME));
+  else if (dom.ketchup.objects.isTimestamp(obj1)) {
+    v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME));
+    v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE_TIME));
   }
   if (v1 > v2) {
     return sm * 1;

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

@@ -1,13 +1,7 @@
-import { KupDates } from '../kup-dates/kup-dates';
 import { KupDatesFormats, KupDatesNormalize, } from '../kup-dates/kup-dates-declarations';
-import { KupObjects } from '../kup-objects/kup-objects';
 import { formattedStringToCustomUnformattedStringTime, formattedStringToDefaultUnformattedStringTimestamp, formattedStringToUnformattedStringNumber, isValidFormattedStringNumber, isValidFormattedStringTime, stringToNumber, unformattedStringNumberToNumber, isNumber as isNumberThisString, } from '../utils';
 import { FilterInterval, FILTER_ANALIZER, } from './filters-declarations';
 const dom = document.documentElement;
-const kupDates = dom.ketchup ? dom.ketchup.dates : new KupDates();
-const kupObjects = dom.ketchup
-  ? dom.ketchup.objects
-  : new KupObjects();
 /**
  * Filtering algorithms.
  * @module Filters
@@ -23,16 +17,16 @@ export class Filters {
     return comp.rootElement.tagName === 'KUP-TREE';
   }
   isObjFiltrableByInterval(obj) {
-    if (kupObjects.isDate(obj)) {
+    if (dom.ketchup.objects.isDate(obj)) {
       return true;
     }
-    if (kupObjects.isTime(obj)) {
+    if (dom.ketchup.objects.isTime(obj)) {
       return true;
     }
-    if (kupObjects.isTimestamp(obj)) {
+    if (dom.ketchup.objects.isTimestamp(obj)) {
       return true;
     }
-    if (kupObjects.isNumber(obj)) {
+    if (dom.ketchup.objects.isNumber(obj)) {
       return true;
     }
     return false;
@@ -42,17 +36,17 @@ export class Filters {
     if (newValue == null || newValue == '' || smeupObj == null) {
       return newValue;
     }
-    if (kupObjects.isDate(smeupObj)) {
-      if (kupDates.isValid(value, KupDatesFormats.ISO_DATE)) {
+    if (dom.ketchup.objects.isDate(smeupObj)) {
+      if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE)) {
         return newValue;
       }
-      if (kupDates.isValid(value)) {
-        return kupDates.format(kupDates.normalize(value, KupDatesNormalize.DATE), KupDatesFormats.ISO_DATE);
+      if (dom.ketchup.dates.isValid(value)) {
+        return dom.ketchup.dates.format(dom.ketchup.dates.normalize(value, KupDatesNormalize.DATE), KupDatesFormats.ISO_DATE);
       }
     }
-    else if (kupObjects.isTime(smeupObj)) {
-      let manageSeconds = kupObjects.isTimeWithSeconds(smeupObj);
-      if (kupDates.isValid(value, manageSeconds
+    else if (dom.ketchup.objects.isTime(smeupObj)) {
+      let manageSeconds = dom.ketchup.objects.isTimeWithSeconds(smeupObj);
+      if (dom.ketchup.dates.isValid(value, manageSeconds
         ? KupDatesFormats.ISO_TIME
         : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS)) {
         return newValue;
@@ -63,15 +57,15 @@ export class Filters {
           : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, manageSeconds);
       }
     }
-    else if (kupObjects.isTimestamp(smeupObj)) {
-      if (kupDates.isValid(value, KupDatesFormats.ISO_DATE_TIME)) {
+    else if (dom.ketchup.objects.isTimestamp(smeupObj)) {
+      if (dom.ketchup.dates.isValid(value, KupDatesFormats.ISO_DATE_TIME)) {
         return newValue;
       }
       if (isValidFormattedStringTime(value, true)) {
         return formattedStringToDefaultUnformattedStringTimestamp(value);
       }
     }
-    else if (kupObjects.isNumber(smeupObj)) {
+    else if (dom.ketchup.objects.isNumber(smeupObj)) {
       if (isValidFormattedStringNumber(value, smeupObj ? smeupObj.p : '')) {
         return formattedStringToUnformattedStringNumber(value, smeupObj ? smeupObj.p : '');
       }
@@ -194,7 +188,7 @@ export class Filters {
       to = interval[FilterInterval.TO];
     }
     let checkByRegularExpression = true;
-    if (kupObjects.isNumber(obj)) {
+    if (dom.ketchup.objects.isNumber(obj)) {
       value = unformattedStringNumberToNumber(value, obj ? obj.p : '');
       let valueNumber = stringToNumber(value);
       if (from != '') {
@@ -222,30 +216,30 @@ export class Filters {
         }
       }
     }
-    if (kupObjects.isDate(obj) ||
-      kupObjects.isTime(obj) ||
-      kupObjects.isTimestamp(obj)) {
+    if (dom.ketchup.objects.isDate(obj) ||
+      dom.ketchup.objects.isTime(obj) ||
+      dom.ketchup.objects.isTimestamp(obj)) {
       let valueDate = null;
       let defaultFormat = KupDatesFormats.ISO_DATE;
-      if (kupObjects.isDate(obj)) {
+      if (dom.ketchup.objects.isDate(obj)) {
         defaultFormat = KupDatesFormats.ISO_DATE;
       }
-      else if (kupObjects.isTime(obj)) {
-        defaultFormat = kupObjects.isTimeWithSeconds(obj)
+      else if (dom.ketchup.objects.isTime(obj)) {
+        defaultFormat = dom.ketchup.objects.isTimeWithSeconds(obj)
           ? KupDatesFormats.ISO_TIME
           : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS;
       }
-      else if (kupObjects.isTimestamp(obj)) {
+      else if (dom.ketchup.objects.isTimestamp(obj)) {
         defaultFormat = KupDatesFormats.ISO_DATE_TIME;
       }
-      if (kupDates.isValid(value, defaultFormat, true)) {
-        valueDate = kupDates.toDate(value, defaultFormat);
+      if (dom.ketchup.dates.isValid(value, defaultFormat, true)) {
+        valueDate = dom.ketchup.dates.toDate(value, defaultFormat);
       }
       if (from != '') {
         if (valueDate != null &&
-          kupDates.isValid(from, defaultFormat, true)) {
+          dom.ketchup.dates.isValid(from, defaultFormat, true)) {
           checkByRegularExpression = false;
-          let fromDate = kupDates.toDate(from, defaultFormat);
+          let fromDate = dom.ketchup.dates.toDate(from, defaultFormat);
           if (valueDate < fromDate) {
             return false;
           }
@@ -256,9 +250,9 @@ export class Filters {
       }
       if (to != '') {
         if (valueDate != null &&
-          kupDates.isValid(to, defaultFormat, true)) {
+          dom.ketchup.dates.isValid(to, defaultFormat, true)) {
           checkByRegularExpression = false;
-          let toDate = kupDates.toDate(to, defaultFormat);
+          let toDate = dom.ketchup.dates.toDate(to, defaultFormat);
           if (valueDate > toDate) {
             return false;
           }
@@ -267,9 +261,9 @@ export class Filters {
           filterValue = to;
         }
       }
-      if (!kupDates.isValid(filterValue, defaultFormat) &&
-        !kupDates.isValid(filterValue)) {
-        value = kupDates.format(value);
+      if (!dom.ketchup.dates.isValid(filterValue, defaultFormat) &&
+        !dom.ketchup.dates.isValid(filterValue)) {
+        value = dom.ketchup.dates.format(value);
       }
     }
     if (checkByRegularExpression) {

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -1,4 +1,4 @@
-import { KupDynamicPositionPlacement } from '../kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupDynamicPositionPlacement, } from '../kup-dynamic-position/kup-dynamic-position-declarations';
 import { treeMainColumnName } from '../../components/kup-tree/kup-tree-declarations';
 import { unsetTooltip } from '../helpers';
 import { FiltersColumnMenu } from '../filters/filters-column-menu';
@@ -18,6 +18,7 @@ const dom = document.documentElement;
  */
 export class KupColumnMenu {
   constructor() {
+    this.clickCb = null;
     this.filtersColumnMenuInstance = new FiltersColumnMenu();
     this.filtersRowsInstance = new FiltersRows();
   }
@@ -39,6 +40,8 @@ export class KupColumnMenu {
    */
   close(card) {
     card.menuVisible = false;
+    dom.ketchup.removeClickCallback(this.clickCb);
+    dom.ketchup.dynamicPosition.stop(card);
   }
   /**
    * Function called to reposition the column menu card to the appropriate column.
@@ -56,6 +59,15 @@ export class KupColumnMenu {
         else {
           dom.ketchup.dynamicPosition.register(card, wrapper, 0, KupDynamicPositionPlacement.BOTTOM, true);
         }
+        if (!this.clickCb) {
+          this.clickCb = {
+            cb: () => {
+              this.close(card);
+            },
+            el: card,
+          };
+        }
+        dom.ketchup.addClickCallback(this.clickCb, true);
         dom.ketchup.dynamicPosition.start(card);
         card.menuVisible = true;
       }
@@ -263,7 +275,7 @@ export class KupColumnMenu {
   prepSwitch(comp, column) {
     const props = [];
     if (!FiltersColumnMenu.isTree(comp)) {
-      if (!dom.ketchup.objects.isEmptySmeupObject(column.obj)) {
+      if (!dom.ketchup.objects.isEmptyKupObj(column.obj)) {
         props.push({
           'data-storage': {
             columnName: column.name,
@@ -538,7 +550,7 @@ export class KupColumnMenu {
   eventHandlers(cardEvent, comp) {
     const card = cardEvent.detail.card
       ? cardEvent.detail.card
-      : cardEvent.detail.comp;
+      : cardEvent.detail.comp.rootElement;
     const compEvent = cardEvent.detail.event;
     const compID = compEvent.detail.id;
     const subcomp = compEvent.target;

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

@@ -8,7 +8,7 @@ import 'dayjs/locale/it';
 import 'dayjs/locale/pl';
 import 'dayjs/locale/ru';
 import 'dayjs/locale/zh';
-import { KupDatesNormalize } from './kup-dates-declarations';
+import { KupDatesLocales, KupDatesNormalize } from './kup-dates-declarations';
 /**
  * Handles operations and formatting of dates.
  * @module KupDates
@@ -41,7 +41,9 @@ export class KupDates {
       if (!navLangs || !navLangs.length) {
         return 'en';
       }
-      this.locale = navLangs[0].split('-')[0].toLowerCase();
+      this.locale = navLangs[0]
+        .split('-')[0]
+        .toLowerCase();
     }
     dayjs.locale(this.locale);
     document.dispatchEvent(new CustomEvent('kup-dates-localechange'));
@@ -53,6 +55,16 @@ export class KupDates {
   getLocale() {
     return this.locale;
   }
+  /**
+   * Gets the available locales.
+   * @returns {Array<KupDatesLocales>} Array of locales' names.
+   */
+  getLocales() {
+    const items = Object.keys(KupDatesLocales)
+      .map((key) => KupDatesLocales[key])
+      .filter((value) => typeof value === 'string');
+    return items;
+  }
   /**
    * Formats the given date.
    * @param {dayjs.ConfigType} input - Date to be formatted.

package/dist/collection/utils/kup-debug/kup-debug-browser-utils.js

@@ -3,7 +3,7 @@
 //
 // Copy/paste the code below inside Google Chrome Dev Tools console, then run logCSS() with the following arguments:
 //
-// 1) String - CSS selector of your Ketch.UP component, for example "kup-data-table#my-table"
+// 1) String - CSS selector of your Ketchup component, for example "kup-data-table#my-table"
 // 2) Boolean - Whether you want a detailed log or not
 //
 // Note: detailedLog will inflate time because of console.logs, useful to check individual entries only.
@@ -92,11 +92,11 @@ function logCSS(selector, detailedLog) {
     console.log('Total time estimated: ' + (end - start) + 'ms.');
 }
 //
-// Check how many event listeners are defined on a Ketch.UP component and its children.
+// Check how many event listeners are defined on a Ketchup component and its children.
 //
 // Copy/paste the code below inside Google Chrome Dev Tools console, then run logEvents() with the following arguments:
 //
-// 1) String - CSS selector of your Ketch.UP component, for example "kup-data-table#my-table"
+// 1) String - CSS selector of your Ketchup component, for example "kup-data-table#my-table"
 // 2) Boolean - Whether you want a detailed log or not
 //
 function logEvents(selector, detailedLog) {