@sme.up/ketchup 5.2.1-SNAPSHOT → 6.2.0-SNAPSHOT

package/dist/collection/managers/kup-theme/kup-theme-declarations.js

@@ -12,8 +12,11 @@ export const fButtonUsers = [
   KupTagNames.BOX,
   KupTagNames.CALENDAR,
   KupTagNames.CARD,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.SNACKBAR,
 ];
 /**
@@ -23,6 +26,7 @@ export const fCellUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -32,7 +36,9 @@ export const fCheckboxUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.CHECKBOX,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.LIST,
   KupTagNames.TREE,
 ];
@@ -45,6 +51,7 @@ export const fChipUsers = [
   KupTagNames.CELL,
   KupTagNames.CHIP,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -60,9 +67,12 @@ export const fImageUsers = [
   KupTagNames.CARD,
   KupTagNames.CELL,
   KupTagNames.CHIP,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM,
   KupTagNames.IMAGE,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.LIST,
   KupTagNames.MAGIC_BOX,
   KupTagNames.SNACKBAR,
@@ -76,7 +86,14 @@ export const fPaginatorUsers = [KupTagNames.BOX, KupTagNames.DATA_TABLE];
 /**
  * Components using the FSwitch functional component.
  */
-export const fSwitchUsers = [KupTagNames.SWITCH];
+export const fSwitchUsers = [
+  KupTagNames.BOX,
+  KupTagNames.CELL,
+  KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
+  KupTagNames.SWITCH,
+  KupTagNames.TREE,
+];
 /**
  * Components using the FTextField functional component.
  */
@@ -86,8 +103,10 @@ export const fTextFieldUsers = [
   KupTagNames.CELL,
   KupTagNames.COLOR_PICKER,
   KupTagNames.COMBOBOX,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DATE_PICKER,
+  KupTagNames.FORM,
   KupTagNames.NUMERIC_PICKER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
@@ -99,6 +118,7 @@ export const fTextFieldUsers = [
 export const rippleUsers = [
   KupTagNames.ACCORDION,
   KupTagNames.CARD,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.TAB_BAR,
   KupTagNames.TREE,
 ];

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

@@ -20,15 +20,17 @@ export class KupTooltip {
   /**
    * Initializes KupTooltip.
    */
-  constructor(delay) {
+  constructor(delay, fCellCallbacks) {
     _KupTooltip_instances.add(this);
     this.currentAnchor = null;
     this.delay = null;
     this.element = null;
+    this.fCellCallbacks = null;
     this.managedElements = null;
     this.timeout = null;
     _KupTooltip_clickCb.set(this, null);
     this.delay = delay ? delay : 125;
+    this.fCellCallbacks = fCellCallbacks ? fCellCallbacks : null;
     this.managedElements = new Set();
     document.addEventListener('pointermove', (e) => {
       const paths = e.composedPath();
@@ -38,13 +40,22 @@ export class KupTooltip {
       }
       const enterHandler = (anchor) => {
         this.timeout = null;
-        requestAnimationFrame(anchor.kupTooltip.enter.bind(anchor.kupTooltip.enter, e));
+        const callbacks = anchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : anchor.kupTooltip;
+        requestAnimationFrame(callbacks.enter.bind(callbacks.enter, e, anchor));
       };
       const overHandler = (anchor) => {
-        requestAnimationFrame(anchor.kupTooltip.over.bind(anchor.kupTooltip.over, e));
+        const callbacks = anchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : anchor.kupTooltip;
+        requestAnimationFrame(callbacks.over.bind(callbacks.over, e, anchor));
       };
-      const leaveHandler = () => {
-        requestAnimationFrame(this.currentAnchor.kupTooltip.leave.bind(this.currentAnchor.kupTooltip.leave, e));
+      const leaveHandler = (anchor) => {
+        const callbacks = this.currentAnchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : this.currentAnchor.kupTooltip;
+        requestAnimationFrame(callbacks.leave.bind(callbacks.leave, e, anchor));
       };
       // If the current anchor exists and is not included in the event path,
       // the leaving callback is fired.
@@ -54,8 +65,11 @@ export class KupTooltip {
           this.timeout = null;
         }
         else {
-          if (this.currentAnchor.kupTooltip.leave) {
-            leaveHandler();
+          const callbacks = this.currentAnchor.kupTooltip
+            ? this.currentAnchor.kupTooltip
+            : this.fCellCallbacks;
+          if (callbacks.leave) {
+            leaveHandler(this.currentAnchor);
           }
         }
         this.currentAnchor = null;
@@ -63,18 +77,25 @@ export class KupTooltip {
       else if (!this.timeout) {
         for (let index = 0; index < paths.length; index++) {
           const element = paths[index];
-          if (this.managedElements.has(element)) {
+          if (element &&
+            (this.managedElements.has(element) ||
+              (this.fCellCallbacks &&
+                element.classList &&
+                element.classList.contains('f-cell')))) {
+            const callbacks = element.kupTooltip
+              ? element.kupTooltip
+              : this.fCellCallbacks;
             // If the current anchor is the same as the registered element found
             // in the path, the mouse over function is invoked
             if (this.currentAnchor === element) {
-              if (element.kupTooltip.over) {
+              if (callbacks.over) {
                 overHandler(element);
               }
               // Otherwise, the mouse enter callback will be invoked
             }
             else {
               this.currentAnchor = element;
-              if (element.kupTooltip.enter) {
+              if (callbacks.enter) {
                 if (this.delay) {
                   this.timeout = setTimeout(enterHandler.bind(enterHandler, element), this.delay);
                 }
@@ -88,6 +109,18 @@ export class KupTooltip {
       }
     });
   }
+  /**
+   * Destroys the tooltip.
+   */
+  destroy() {
+    if (this.element) {
+      this.element.remove();
+      this.element = null;
+    }
+  }
+  /**
+   * Hides the tooltip.
+   */
   hide() {
     if (this.element) {
       this.element.menuVisible = false;
@@ -95,6 +128,11 @@ export class KupTooltip {
       dom.ketchup.removeClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"));
     }
   }
+  /**
+   * Displays the tooltip.
+   * @param {KupDynamicPositionAnchor} anchor - Anchor point of the tooltip: HTML element or x/y coordinates.
+   * @param {Partial<HTMLKupCardElement>} options - Props/attributes of the tooltip.
+   */
   show(anchor, options) {
     // Creates the card or updates it with new options
     if (!this.element) {
@@ -132,18 +170,13 @@ export class KupTooltip {
   /**
    * Registers an HTMLElement as KupTooltipAnchor, triggering callback invocation on mouse over.
    * @param {KupTooltipAnchor} element - The HTML element to be registered.
-   * @param {(e: PointerEvent) => void} cbEnter - Callback invoked when hovering on the the element for the first time.
-   * @param {(e: PointerEvent) => void} cbOver - Callback invoked when hovering on the element.
-   * @param {(e: PointerEvent) => void} cbLeave - Callback invoked when leaving the element.
+   * @param {KupTooltipCallbacks} options - Optional callbacks.
    */
-  register(element, cbEnter, cbOver, cbLeave) {
+  register(element, options) {
     this.managedElements.add(element);
-    const kupTooltip = {
-      enter: cbEnter,
-      leave: cbLeave,
-      over: cbOver,
-    };
-    element.kupTooltip = kupTooltip;
+    if (options !== null && options) {
+      element.kupTooltip = options;
+    }
   }
   /**
    * Unregisters an HTMLElement, preventing its attached callback from being invoked.

package/dist/collection/types/GenericTypes.js

@@ -19,15 +19,18 @@ export var KupTagNames;
   KupTagNames["COMBOBOX"] = "KUP-COMBOBOX";
   KupTagNames["DASH"] = "KUP-DASH";
   KupTagNames["DASH_LIST"] = "KUP-DASH-LIST";
+  KupTagNames["DASHBOARD"] = "KUP-DASHBOARD";
   KupTagNames["DATA_TABLE"] = "KUP-DATA-TABLE";
   KupTagNames["DATE_PICKER"] = "KUP-DATE-PICKER";
   KupTagNames["DRAWER"] = "KUP-DRAWER";
   KupTagNames["DROPDOWN_BUTTON"] = "KUP-DROPDOWN-BUTTON";
   KupTagNames["FIELD"] = "KUP-FIELD";
+  KupTagNames["FORM"] = "KUP-FORM";
   KupTagNames["GAUGE"] = "KUP-GAUGE";
   KupTagNames["GRID"] = "KUP-GRID";
   KupTagNames["IFRAME"] = "KUP-IFRAME";
   KupTagNames["IMAGE"] = "KUP-IMAGE";
+  KupTagNames["IMAGE_LIST"] = "KUP-IMAGE-LIST";
   KupTagNames["LAZY"] = "KUP-LAZY";
   KupTagNames["LIST"] = "KUP-LIST";
   KupTagNames["MAGIC_BOX"] = "KUP-MAGIC-BOX";

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

@@ -1,5 +1,4 @@
 import { KupDynamicPositionPlacement, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
-import { unsetTooltip } from '../helpers';
 import { FiltersColumnMenu } from '../filters/filters-column-menu';
 import { FilterInterval, } from '../filters/filters-declarations';
 import { getValueForDisplay, getValueForDisplay2 } from '../cell-utils';
@@ -26,12 +25,8 @@ export class KupColumnMenu {
    * Function called by the component when the column menu must be opened.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @param {string} column - Name of the column.
-   * @param {KupTooltip} tooltip - Tooltip of the component, when present.
    */
-  open(comp, column, tooltip) {
-    if (tooltip) {
-      unsetTooltip(tooltip);
-    }
+  open(comp, column) {
     this.filtersColumnMenuInstance.resetTextualFilters(comp.filters, column);
   }
   /**
@@ -308,8 +303,8 @@ export class KupColumnMenu {
     const data = props[0].data;
     if (comp.showFilters) {
       data.push({
-        text: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
-        value: KupLanguageGeneric.FILTERS,
+        id: KupLanguageGeneric.FILTERS,
+        value: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
       });
     }
     if ((comp.enableExtraColumns &&
@@ -317,14 +312,15 @@ export class KupColumnMenu {
         dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) ||
       comp.removableColumns) {
       data.push({
-        text: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
-        value: KupLanguageColumn.COLUMNS,
+        id: KupLanguageColumn.COLUMNS,
+        value: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
       });
     }
     if (!FiltersColumnMenu.isTree(comp)) {
       data.push({
         icon: 'settings',
-        value: KupLanguageGeneric.SETTINGS,
+        id: KupLanguageGeneric.SETTINGS,
+        value: '',
       });
     }
     if (data.length > 0) {

package/dist/esm/{cell-utils-f4bdbbc8.js → cell-utils-7fc84d4e.js}

@@ -1,5 +1,5 @@
-import { k as unformattedStringToFormattedStringNumber, m as unformattedStringToFormattedStringTime, o as unformattedStringToFormattedStringTimestamp, d as stringToNumber } from './utils-f24319a0.js';
-import { d as KupDatesFormats } from './kup-manager-9316a184.js';
+import { u as unformattedStringToFormattedStringNumber, d as unformattedStringToFormattedStringTime, e as unformattedStringToFormattedStringTimestamp, h as stringToNumber } from './utils-6373a07e.js';
+import { d as KupDatesFormats } from './kup-manager-3325b2d8.js';
 
 const dom = document.documentElement;
 // -------------
@@ -157,4 +157,4 @@ function localCompareAsInJava(t1, t2) {
   return t1Length - t2Length;
 }
 
-export { getValueForDisplay2 as a, getCellValueForDisplay as b, getColumnByName as c, compareValues as d, compareCell as e, formatToNumber as f, getValueForDisplay as g };
+export { getValueForDisplay2 as a, getValueForDisplay as b, getCellValueForDisplay as c, compareValues as d, compareCell as e, formatToNumber as f, getColumnByName as g };

package/dist/esm/{component-c4eb6153.js → component-b1bedf1d.js}

@@ -1,4 +1,4 @@
-import { _ as __spreadArray, a as __read, b as __extends, c as __assign, d as __values } from './tslib.es6-8f2d44b6.js';
+import { c as __spreadArray, d as __read, _ as __extends, a as __assign, b as __values } from './tslib.es6-3eea2234.js';
 
 /**
  * @license
@@ -256,6 +256,31 @@ function matches(element, selector) {
         || element.msMatchesSelector;
     return nativeMatches.call(element, selector);
 }
+/**
+ * Used to compute the estimated scroll width of elements. When an element is
+ * hidden due to display: none; being applied to a parent element, the width is
+ * returned as 0. However, the element will have a true width once no longer
+ * inside a display: none context. This method computes an estimated width when
+ * the element is hidden or returns the true width when the element is visble.
+ * @param {Element} element the element whose width to estimate
+ */
+function estimateScrollWidth(element) {
+    // Check the offsetParent. If the element inherits display: none from any
+    // parent, the offsetParent property will be null (see
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).
+    // This check ensures we only clone the node when necessary.
+    var htmlEl = element;
+    if (htmlEl.offsetParent !== null) {
+        return htmlEl.scrollWidth;
+    }
+    var clone = htmlEl.cloneNode(true);
+    clone.style.setProperty('position', 'absolute');
+    clone.style.setProperty('transform', 'translate(-9999px, -9999px)');
+    document.documentElement.appendChild(clone);
+    var scrollWidth = clone.scrollWidth;
+    document.documentElement.removeChild(clone);
+    return scrollWidth;
+}
 
 /**
  * @license
@@ -990,4 +1015,4 @@ var MDCRipple = /** @class */ (function (_super) {
     return MDCRipple;
 }(MDCComponent));
 
-export { MDCRipple as M, MDCRippleFoundation as a };
+export { MDCRipple as M, MDCFoundation as a, MDCComponent as b, applyPassive as c, MDCRippleFoundation as d, estimateScrollWidth as e, matches as m };

package/dist/esm/{f-button-54a49fd8.js → f-button-2f6cc296.js}

@@ -1,6 +1,6 @@
-import { h } from './index-baeab1ac.js';
+import { h } from './index-ad6ab214.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-d32465e3.js';
+import { F as FImage } from './f-image-b08ebeb2.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -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, type: "button" },
+  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" },
     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' },
+  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", 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" },