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

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

@@ -5,6 +5,7 @@
   display: block;
   left: 0;
   outline: none;
+  pointer-events: none;
   position: fixed;
   transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
   width: 100%;
@@ -37,6 +38,7 @@
 }
 .snackbar__text {
   padding: 14px 16px;
+  pointer-events: all;
   white-space: nowrap;
 }
 .snackbar__buttons {
@@ -49,11 +51,13 @@
   display: flex;
   justify-content: flex-end;
   margin-right: 8px;
+  pointer-events: all;
   width: 100%;
 }
 .snackbar__close {
   --kup-button-font-size: 11px;
   margin-left: 8px;
+  pointer-events: all;
 }
 
 @keyframes snackbar-show {

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -44,15 +44,15 @@ export class KupTabBar {
      */
     this.scrollArea = null;
   }
-  onKupBlur(i, e) {
+  onKupBlur(i, node) {
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
+      node: node,
     });
   }
-  onKupClick(i, e) {
+  onKupClick(i, node) {
     for (let i = 0; i < this.data.length; i++) {
       this.data[i].active = false;
     }
@@ -62,16 +62,15 @@ export class KupTabBar {
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
-      value: this.data[i].value,
+      node: node,
     });
   }
-  onKupFocus(i, e) {
+  onKupFocus(i, node) {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
+      node: node,
     });
   }
   /*-------------------------------------------------*/
@@ -166,17 +165,17 @@ export class KupTabBar {
     }
     const tabBar = [];
     for (let i = 0; i < this.data.length; i++) {
-      const data = this.data[i];
+      const node = this.data[i];
       const tabClass = {
         tab: true,
-        'tab--active': data.active ? true : false,
+        'tab--active': node.active ? true : false,
         'mdc-ripple-surface': this.ripple ? true : false,
       };
-      const tabEl = (h("button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: data.title ? data.title : null, onBlur: (e) => this.onKupBlur(i, e), onClick: (e) => this.onKupClick(i, e), onFocus: (e) => this.onKupFocus(i, e) },
+      const tabEl = (h("button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) },
         h("span", { class: "tab__content" },
-          data.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: data.icon, sizeX: "24px", sizeY: "24px", wrapperClass: "tab__icon" })) : null,
-          h("span", { class: "tab__text-label" }, this.data[i].text)),
-        h("span", { class: `tab-indicator ${data.active ? ' tab-indicator--active' : ''}` },
+          node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, sizeX: "24px", sizeY: "24px", wrapperClass: "tab__icon" })) : null,
+          node.value ? (h("span", { class: "tab__text-label" }, this.data[i].value)) : null),
+        h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` },
           h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
       tabBar.push(tabEl);
     }
@@ -230,10 +229,10 @@ export class KupTabBar {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "KupTabBarData[]",
-        "resolved": "KupTabBarData[]",
+        "original": "KupTabBarNode[]",
+        "resolved": "KupTabBarNode[]",
         "references": {
-          "KupTabBarData": {
+          "KupTabBarNode": {
             "location": "import",
             "path": "./kup-tab-bar-declarations"
           }
@@ -306,10 +305,10 @@ export class KupTabBar {
         "text": "Triggered when the tab is clicked."
       },
       "complexType": {
-        "original": "KupTabBarClickEventPayload",
-        "resolved": "KupTabBarClickEventPayload",
+        "original": "KupTabBarEventPayload",
+        "resolved": "KupTabBarEventPayload",
         "references": {
-          "KupTabBarClickEventPayload": {
+          "KupTabBarEventPayload": {
             "location": "import",
             "path": "./kup-tab-bar-declarations"
           }

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

@@ -17,7 +17,10 @@ export var KupTextFieldProps;
   KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
   KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
+  KupTextFieldProps["max"] = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
   KupTextFieldProps["maxLength"] = "When set, the helper will display a character counter.";
+  KupTextFieldProps["min"] = "The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
+  KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";

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

@@ -102,6 +102,11 @@ export class KupTextField {
      * @default null
      */
     this.min = null;
+    /**
+     * The HTML name attribute used for form autocomplete.
+     * @default null
+     */
+    this.name = null;
     /**
      * When set to true, the component will be rendered as an outlined field.
      * @default false
@@ -305,6 +310,7 @@ export class KupTextField {
       max: this.max,
       maxLength: this.maxLength,
       min: this.min,
+      name: this.name,
       outlined: this.outlined,
       readOnly: this.readOnly,
       secondary: this.rootElement.classList.contains('kup-secondary')
@@ -689,6 +695,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "null"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "The HTML name attribute used for form autocomplete."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "outlined": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -61,12 +61,6 @@ export class KupTimePicker {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.hoursEl = undefined;
-    this.minutesEl = undefined;
-    this.secondsEl = undefined;
-    this.hoursCircleEl = undefined;
-    this.minutesCircleEl = undefined;
-    this.secondsCircleEl = undefined;
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
@@ -78,7 +72,7 @@ export class KupTimePicker {
   onKupTimePickerItemClick(e, value) {
     if (e != null) {
       if (value == null) {
-        value = e.detail.selected.value;
+        value = e.detail.selected.id;
       }
     }
     this.setPickerValueSelected(value);
@@ -366,7 +360,7 @@ export class KupTimePicker {
         } }));
     }
     else {
-      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.id), id: this.rootElement.id + '_list' }));
     }
   }
   createTimeListData(value) {

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

@@ -30,10 +30,6 @@ export var KupTreeProps;
   KupTreeProps["showIcons"] = "Shows the icons of the nodes.";
   KupTreeProps["stateId"] = "";
   KupTreeProps["store"] = "";
-  KupTreeProps["showTooltipOnRightClick"] = "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.";
-  KupTreeProps["tooltipDetailTimeout"] = "Defines the timeout for tooltip detail";
-  KupTreeProps["tooltipEnabled"] = "Enable show tooltip";
-  KupTreeProps["tooltipLoadTimeout"] = "Defines the timeout for tooltip load";
   KupTreeProps["totals"] = "Defines the current totals options.";
   KupTreeProps["useDynamicExpansion"] = "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the tree have been passed inside the data property. Therefore, when expanding a node, the tree must emit an event (or run a given callback) and wait for the child nodes to be downloaded from the server.";
 })(KupTreeProps || (KupTreeProps = {}));

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

@@ -2,6 +2,7 @@
 * @prop --kup-tree-border: Sets border of the component.
 * @prop --kup-tree-color: Sets text color of the component.
 * @prop --kup-tree-color-rgb: Sets text color RGB values of the component (used for shaders).
+* @prop --kup-tree-filter-background-color: Sets the background color of the global filter.
 * @prop --kup-tree-font-family: Sets font family of the component.
 * @prop --kup-tree-font-family-monospace: Sets monospace font family of the component (for number cells).
 * @prop --kup-tree-font-size: Sets font size of the component.
@@ -17,6 +18,7 @@
   --kup_tree_color: var(--kup-tree-color, var(--kup-text-color));
   --kup_tree_color_rgb: var(--kup-tree-color-rgb, var(--kup-text-color-rgb));
   --kup_tree_font_family: var(--kup-tree-font-family, var(--kup-font-family));
+  --kup_tree_filter_background_color: var(--kup-tree-filter-background-color, var(--kup-background-color));
   --kup_tree_font_family_monospace: var(
     --kup-tree-font-family-monospace,
     var(--kup-font-family-monospace)
@@ -79,9 +81,6 @@
 .wrapper {
   overflow-x: auto;
 }
-.wrapper #global-filter {
-  margin-bottom: 1em;
-}
 .wrapper .kup-tree {
   border-collapse: collapse;
   width: max-content;
@@ -185,6 +184,14 @@
   border-bottom: solid 1px var(--kup-border-color);
 }
 
+#global-filter {
+  background: var(--kup_tree_filter_background_color);
+  margin-bottom: 1em;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .first-node .cell-content {
   font-weight: bold;
 }

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

@@ -5,7 +5,6 @@ import { MDCRipple } from '@material/ripple';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-helper';
 import { KupTreeState } from './kup-tree-state';
-import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { getColumnByName } from '../../utils/cell-utils';
 import { getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
 import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
@@ -20,6 +19,7 @@ import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-d
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -163,14 +163,6 @@ export class KupTree {
      * @see dynamicExpansionCallback
      */
     this.useDynamicExpansion = false;
-    /**
-     * If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.
-     */
-    this.showTooltipOnRightClick = true;
-    /**
-     * Enable show tooltip
-     */
-    this.tooltipEnabled = true;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -198,7 +190,6 @@ export class KupTree {
     if (this.store && this.stateId) {
       const state = this.store.getState(this.stateId);
       if (state != null) {
-        console.log('Initialize with state for stateId ' + this.stateId, state);
         this.density = state.density;
         this.showFilters = state.showFilters;
         this.showFooter = state.showFooter;
@@ -245,7 +236,6 @@ export class KupTree {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -390,7 +380,7 @@ export class KupTree {
     }
     this.columnMenuCard.setAttribute('data-column', column);
     this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), column));
-    this.columnMenuInstance.open(this, column, this.tooltip);
+    this.columnMenuInstance.open(this, column);
     this.columnMenuInstance.reposition(this, this.columnMenuCard);
     this.kupTreeColumnMenu.emit({
       comp: this,
@@ -550,16 +540,52 @@ export class KupTree {
   openTotalMenu(column) {
     this.openedTotalMenu = column.name;
   }
-  closeMenuAndTooltip() {
-    unsetTooltip(this.tooltip);
-  }
   onTotalMenuOpen(column) {
-    this.closeMenuAndTooltip();
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(el) {
-    const isHeader = !!el.closest('thead'), isBody = !!el.closest('tbody'), isFooter = !!el.closest('tfoot'), td = el.closest('td'), th = el.closest('th'), tr = el.closest('tr'), filterRemove = el.closest('th .filter-remove');
+  getEventDetails(path, e) {
+    let isHeader, isBody, isFooter, td, th, tr, filterRemove;
+    if (path) {
+      for (let i = path.length - 1; i >= 0; i--) {
+        let p = path[i];
+        if (!p.tagName) {
+          continue;
+        }
+        switch (p.tagName.toUpperCase()) {
+          case 'THEAD': {
+            isHeader = true;
+            break;
+          }
+          case 'TBODY': {
+            isBody = true;
+            break;
+          }
+          case 'TFOOT': {
+            isFooter = true;
+            break;
+          }
+          case 'TD': {
+            td = p;
+            break;
+          }
+          case 'TH': {
+            th = p;
+            break;
+          }
+          case 'TR': {
+            tr = p;
+            break;
+          }
+          default: {
+            if (p.classList.contains(KupThemeIconValues.FILTER_REMOVE.replace('--', ''))) {
+              filterRemove = p;
+            }
+            break;
+          }
+        }
+      }
+    }
     let cell = null, column = null, row = null;
     if (isBody) {
       if (td) {
@@ -590,6 +616,7 @@ export class KupTree {
       cell: cell ? cell : null,
       column: column ? column : null,
       filterRemove: filterRemove ? filterRemove : null,
+      originalEvent: e,
       row: row ? row : null,
       td: td ? td : null,
       th: th ? th : null,
@@ -598,7 +625,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -614,9 +641,20 @@ export class KupTree {
     }
     return details;
   }
+  getEventPath(currentEl) {
+    const path = [];
+    while (currentEl &&
+      currentEl !== this.rootElement &&
+      currentEl !== document.body) {
+      path.push(currentEl);
+      currentEl = currentEl.parentNode
+        ? currentEl.parentNode
+        : currentEl.host;
+    }
+    return path;
+  }
   // When a TreeNode can be selected
   hdlTreeNodeClick(e, treeNodeData, treeNodePath, auto) {
-    unsetTooltip(this.tooltip);
     if (this.expansionMode.toLowerCase() ===
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
@@ -647,7 +685,6 @@ export class KupTree {
   }
   // When a TreeNode must be expanded or closed.
   hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, ctrlKey) {
-    unsetTooltip(this.tooltip);
     // If the node is expandable
     if (treeNodeData.expandable) {
       // Always composes the tree node path as an array
@@ -828,34 +865,6 @@ export class KupTree {
       return h("span", { style: iconStyle, class: CSSClass });
     }
   }
-  /**
-   * Controls if current cell needs a tooltip and eventually adds it.
-   * @todo When the option forceOneLine is active, there is a problem with the current implementation of the tooltip. See documentation in the mauer wiki for better understanding.
-   */
-  getToolTipEventHandlers(treeNodeData, cell, hasTooltip) {
-    let eventHandlers = undefined;
-    if (hasTooltip) {
-      if (this.showTooltipOnRightClick) {
-        eventHandlers = {
-          onContextMenu: (ev) => {
-            ev.preventDefault();
-            setTooltip(ev, treeNodeData.id, null, cell, this.tooltip);
-          },
-        };
-      }
-      else {
-        eventHandlers = {
-          onMouseEnter: (ev) => {
-            setTooltip(ev, treeNodeData.id, null, cell, this.tooltip);
-          },
-          onMouseLeave: () => {
-            unsetTooltip(this.tooltip);
-          },
-        };
-      }
-    }
-    return eventHandlers;
-  }
   getCellStyle(colName, cellStyle) {
     // Controls if there are columns with a specified width
     if (this.sizedColumns) {
@@ -881,14 +890,6 @@ export class KupTree {
     }
     return cellStyle;
   }
-  renderTooltip() {
-    if (this.tooltipEnabled == false) {
-      return null;
-    }
-    return (h("kup-tooltip", { class: "tree-tooltip", owner: this.rootElement.tagName, loadTimeout: this.showTooltipOnRightClick == true
-        ? 0
-        : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
-  }
   /**
    * Renders the header of the tree when it must be displayed as a table.
    * @returns An array of table header cells.
@@ -1039,7 +1040,7 @@ export class KupTree {
             row: treeNodeData,
             setSizes: true,
           };
-          treeNodeCells.push(h("td", { class: `grid-cell` },
+          treeNodeCells.push(h("td", { class: `grid-cell`, "data-cell": cell, "data-column": column.name },
             h(FCell, Object.assign({}, cellProps))));
         }
         else {
@@ -1047,9 +1048,9 @@ export class KupTree {
         }
       }
     }
-    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
-    if (_hasTooltip && this.kupManager.debug.isDebug()) {
+    if (!this.kupManager.objects.isEmptyKupObj(treeNodeData.obj) &&
+      this.kupManager.debug.isDebug()) {
       title =
         treeNodeData.obj.t +
           '; ' +
@@ -1058,10 +1059,6 @@ export class KupTree {
           treeNodeData.obj.k +
           ';';
     }
-    const cell = {
-      obj: treeNodeData.obj,
-      value: treeNodeData.value,
-    };
     let treeNodeCell = null;
     if (this.isTreeColumnVisible()) {
       let content = '';
@@ -1071,7 +1068,7 @@ export class KupTree {
       else {
         content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, treeNodeData.value));
       }
-      treeNodeCell = (h("td", Object.assign({ class: {
+      treeNodeCell = (h("td", { class: {
           'first-node': treeNodeDepth === 0 ? true : false,
           'mdc-ripple-surface': this.ripple &&
             !this.showColumns &&
@@ -1079,7 +1076,7 @@ export class KupTree {
           'is-obj': !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj),
         }, style: treeNodeData.style || null, title: title, onDblClick: () => {
           this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
-        } }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip)), this.asAccordion && !treeNodeDepth
+        } }, this.asAccordion && !treeNodeDepth
         ? [
           treeNodeIcon,
           content,
@@ -1094,7 +1091,7 @@ export class KupTree {
         'kup-tree__node--first': treeNodeDepth ? false : true,
         'kup-tree__node--selected': !treeNodeData.disabled &&
           treeNodePath === this.selectedNodeString,
-      }, "data-tree-path": treeNodePath }, treeNodeOptions),
+      }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions),
       treeNodeCell,
       treeNodeCells));
   }
@@ -1112,7 +1109,7 @@ export class KupTree {
       // must do this
       // otherwise does not fire the watcher
       const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.value;
+      const value = event.detail.selected.id;
       if (value === TotalLabel.CANC) {
         if (this.totals && this.totals[column.name]) {
           delete totalsCopy[column.name];
@@ -1376,6 +1373,12 @@ export class KupTree {
         }
       }
     }
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     if (this.preventXScroll) {
       this.setEllipsis();
     }
@@ -1390,7 +1393,6 @@ export class KupTree {
   }
   render() {
     this.contentRefs = [];
-    const tooltip = this.renderTooltip();
     this.sizedColumns = this.getSizedColumns();
     let wrapperClass = 'density-medium';
     switch (this.density) {
@@ -1429,9 +1431,9 @@ export class KupTree {
     return (h(Host, null,
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, class: wrapperClass },
+        filterField,
         h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
             el) },
-          filterField,
           h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
               e.preventDefault();
             } },
@@ -1443,8 +1445,7 @@ export class KupTree {
             (this.showFooter || this.hasTotals()) &&
               this.columns
               ? this.renderFooter()
-              : null)),
-        tooltip)));
+              : null)))));
   }
   disconnectedCallback() {
     this.kupManager.language.register(this);
@@ -2043,76 +2044,6 @@ export class KupTree {
       "reflect": false,
       "defaultValue": "false"
     },
-    "showTooltipOnRightClick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver."
-      },
-      "attribute": "show-tooltip-on-right-click",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipDetailTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip detail"
-      },
-      "attribute": "tooltip-detail-timeout",
-      "reflect": false
-    },
-    "tooltipEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable show tooltip"
-      },
-      "attribute": "tooltip-enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipLoadTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip load"
-      },
-      "attribute": "tooltip-load-timeout",
-      "reflect": false
-    },
     "totals": {
       "type": "unknown",
       "mutable": true,

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, 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" },