@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout;
+var _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
 import { ScrollOnHoverDirection, } from './kup-scroll-on-hover-declarations';
 const dom = document.documentElement;
 /**
@@ -23,6 +23,7 @@ export class KupScrollOnHover {
    * @param {number} step - The amount in pixels for each scroll recursion.
    */
   constructor(delay, step) {
+    _KupScrollOnHover_instances.add(this);
     _KupScrollOnHover_arrowsContainer.set(this, void 0);
     _KupScrollOnHover_leftArrows.set(this, void 0);
     _KupScrollOnHover_rightArrows.set(this, void 0);
@@ -34,42 +35,32 @@ export class KupScrollOnHover {
     this.delay = delay ? delay : 500;
     this.managedElements = new Set();
     this.step = step ? step : 50;
-    __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_mouseleaveEvent, (event) => this.stop(event.target), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_mousemoveEvent, (event) => this.start(event), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_rAF, null, "f");
-    __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_scrollEvent, (event) => this.updateChildren(event.target), "f");
     __classPrivateFieldSet(this, _KupScrollOnHover_timeout, null, "f");
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
-    }
-    for (let index = 1; index < 4; index++) {
-      const arrow = document.createElement('div');
-      arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
-      __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
-    }
-    __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
-    this.container = document.createElement('div');
-    this.container.setAttribute('kup-scroll-on-hover', '');
-    this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
-    document.body.appendChild(this.container);
   }
   /**
    * Watches the given element in order to trigger the scroll on hover when conditions are met.
    * Children nodes with the "hover-scrolling-child" will be watched and scrolled when el scrolls.
    * @param {KupScrollOnHoverElement} el - Element to watch.
+   * @param {boolean} vertical - Enables vertical scroll.
+   * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
    */
-  register(el) {
+  register(el, vertical, percentages) {
+    if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
+      __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
+    }
     el.style.overflowX = 'auto';
     el.scrollOnHover = {
       active: false,
       children: el.querySelectorAll('.hover-scrolling-child'),
+      percentages: percentages
+        ? percentages
+        : { back: 0.1, forward: 0.9 },
       rect: null,
+      vertical: vertical || null,
       x: 0,
       y: 0,
     };
@@ -114,14 +105,19 @@ export class KupScrollOnHover {
     if (el.scrollOnHover.active || __classPrivateFieldGet(this, _KupScrollOnHover_timeout, "f")) {
       return;
     }
+    let trueHeight = el.clientHeight;
+    if (trueHeight === 0) {
+      trueHeight = el.offsetHeight;
+    }
     let trueWidth = el.clientWidth;
     if (trueWidth === 0) {
       trueWidth = el.offsetWidth;
     }
     if (el.scrollWidth > trueWidth + 10) {
       if (trueWidth !== 0 && !el.scrollOnHover.active) {
-        const percRight = trueWidth - trueWidth * 0.1;
-        const percLeft = trueWidth - trueWidth * 0.9;
+        const percRight = trueWidth - trueWidth * el.scrollOnHover.percentages.back;
+        const percLeft = trueWidth -
+          trueWidth * el.scrollOnHover.percentages.forward;
         const elOffset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
         const maxScrollLeft = el.scrollWidth - trueWidth;
         const direction = elOffset < percLeft && el.scrollLeft !== 0
@@ -148,6 +144,28 @@ export class KupScrollOnHover {
         }
       }
     }
+    if (el.scrollOnHover.vertical && el.scrollHeight > trueHeight + 10) {
+      if (trueHeight !== 0 && !el.scrollOnHover.active) {
+        const percBottom = trueHeight - trueHeight * el.scrollOnHover.percentages.back;
+        const percTop = trueHeight -
+          trueHeight * el.scrollOnHover.percentages.forward;
+        const elOffset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        const maxScrollTop = el.scrollHeight - trueHeight;
+        const direction = elOffset < percTop && el.scrollTop !== 0
+          ? ScrollOnHoverDirection.TOP
+          : elOffset > percBottom && el.scrollTop !== maxScrollTop
+            ? ScrollOnHoverDirection.BOTTOM
+            : null;
+        if (direction) {
+          __classPrivateFieldSet(this, _KupScrollOnHover_timeout, setTimeout(() => {
+            el.scrollOnHover.active = true;
+            __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
+              dom.ketchup.scrollOnHover.run(el, maxScrollTop, percBottom, percTop, direction);
+            }), "f");
+          }, this.delay), "f");
+        }
+      }
+    }
   }
   /**
    * When called, this function stops the scrolling process.
@@ -171,25 +189,51 @@ export class KupScrollOnHover {
    * The actual recursive scroll function.
    * @param {KupScrollOnHoverElement} el - The scrolled element.
    * @param {number} maxScrollLeft - Left coordinates to which the recursiveness must be stopped.
-   * @param {number} percRight - Range of the right scrollable area.
-   * @param {number} percLeft - Range of the left scrollable area.
+   * @param {number} percForward - Range of the right (or bottom) area.
+   * @param {number} percBack - Range of the left (or top) scrollable area.
    * @param {ScrollOnHoverDirection} direction - Direction of the scroll.
    */
-  run(el, maxScrollLeft, percRight, percLeft, direction) {
+  run(el, maxScrollLeft, percForward, percBack, direction) {
     if (!el.scrollOnHover.active) {
       this.stop(el);
       return;
     }
-    const offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
-    if (offset > percLeft && offset < percRight) {
+    let offset = 0;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM:
+      case ScrollOnHoverDirection.TOP: {
+        offset = el.scrollOnHover.y - el.scrollOnHover.rect.top;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+      case ScrollOnHoverDirection.LEFT:
+      case ScrollOnHoverDirection.RIGHT: {
+        offset = el.scrollOnHover.x - el.scrollOnHover.rect.left;
+        if (offset > percBack && offset < percForward) {
+          this.stop(el);
+          return;
+        }
+        break;
+      }
+    }
+    if (direction === ScrollOnHoverDirection.RIGHT &&
+      percForward > offset) {
+      this.stop(el);
+      return;
+    }
+    if (direction === ScrollOnHoverDirection.LEFT && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.RIGHT && percRight > offset) {
+    if (direction === ScrollOnHoverDirection.TOP && percBack < offset) {
       this.stop(el);
       return;
     }
-    if (direction === ScrollOnHoverDirection.LEFT && percLeft < offset) {
+    if (direction === ScrollOnHoverDirection.BOTTOM &&
+      percForward > offset) {
       this.stop(el);
       return;
     }
@@ -197,27 +241,49 @@ export class KupScrollOnHover {
       this.updateChildren(el);
     }
     let arrow;
-    if (direction === ScrollOnHoverDirection.LEFT) {
-      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
-      if (el.scrollLeft === 0) {
-        this.stop(el);
-        return;
+    switch (direction) {
+      case ScrollOnHoverDirection.BOTTOM: {
+        arrow = [];
+        if (el.scrollTop === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop += this.step;
+        break;
       }
-      el.scrollLeft -= this.step;
-    }
-    else {
-      arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
-      if (el.scrollLeft === maxScrollLeft) {
-        this.stop(el);
-        return;
+      case ScrollOnHoverDirection.LEFT: {
+        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f");
+        if (el.scrollLeft === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft -= this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.RIGHT: {
+        arrow = __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f");
+        if (el.scrollLeft === maxScrollLeft) {
+          this.stop(el);
+          return;
+        }
+        el.scrollLeft += this.step;
+        break;
+      }
+      case ScrollOnHoverDirection.TOP: {
+        arrow = [];
+        if (el.scrollTop === 0) {
+          this.stop(el);
+          return;
+        }
+        el.scrollTop -= this.step;
+        break;
       }
-      el.scrollLeft += this.step;
     }
     for (let i = 0; i < arrow.length; i++) {
       arrow[i].classList.add('kup-animated');
     }
     __classPrivateFieldSet(this, _KupScrollOnHover_rAF, requestAnimationFrame(function () {
-      dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percRight, percLeft, direction);
+      dom.ketchup.scrollOnHover.run(el, maxScrollLeft, percForward, percBack, direction);
     }), "f");
   }
   /**
@@ -230,4 +296,24 @@ export class KupScrollOnHover {
     }
   }
 }
-_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap();
+_KupScrollOnHover_arrowsContainer = new WeakMap(), _KupScrollOnHover_leftArrows = new WeakMap(), _KupScrollOnHover_rightArrows = new WeakMap(), _KupScrollOnHover_scrollEvent = new WeakMap(), _KupScrollOnHover_mousemoveEvent = new WeakMap(), _KupScrollOnHover_mouseleaveEvent = new WeakMap(), _KupScrollOnHover_rAF = new WeakMap(), _KupScrollOnHover_timeout = new WeakMap(), _KupScrollOnHover_instances = new WeakSet(), _KupScrollOnHover_initArrows = function _KupScrollOnHover_initArrows() {
+  __classPrivateFieldSet(this, _KupScrollOnHover_arrowsContainer, document.createElement('div'), "f");
+  __classPrivateFieldSet(this, _KupScrollOnHover_leftArrows, [], "f");
+  __classPrivateFieldSet(this, _KupScrollOnHover_rightArrows, [], "f");
+  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").id = 'kup-scrolling-arrows';
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-left-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f").push(arrow);
+  }
+  for (let index = 1; index < 4; index++) {
+    const arrow = document.createElement('div');
+    arrow.setAttribute('class', 'kup-right-scrolling-arrow kup-arrow-' + index);
+    __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f").push(arrow);
+  }
+  __classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f").append(__classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[2], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_leftArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[0], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[1], __classPrivateFieldGet(this, _KupScrollOnHover_rightArrows, "f")[2]);
+  this.container = document.createElement('div');
+  this.container.setAttribute('kup-scroll-on-hover', '');
+  this.container.appendChild(__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f"));
+  document.body.appendChild(this.container);
+};

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

@@ -12,9 +12,11 @@ export const fButtonUsers = [
   KupTagNames.BOX,
   KupTagNames.CALENDAR,
   KupTagNames.CARD,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
-  KupTagNames.FORM_EDITOR,
+  KupTagNames.FAMILY_TREE,
+  KupTagNames.FORM,
   KupTagNames.IMAGE_LIST,
   KupTagNames.SNACKBAR,
 ];
@@ -25,6 +27,7 @@ export const fCellUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -34,7 +37,9 @@ export const fCheckboxUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.CHECKBOX,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.LIST,
   KupTagNames.TREE,
 ];
@@ -47,6 +52,7 @@ export const fChipUsers = [
   KupTagNames.CELL,
   KupTagNames.CHIP,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -62,9 +68,11 @@ export const fImageUsers = [
   KupTagNames.CARD,
   KupTagNames.CELL,
   KupTagNames.CHIP,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
-  KupTagNames.FORM_EDITOR,
+  KupTagNames.FAMILY_TREE,
+  KupTagNames.FORM,
   KupTagNames.IMAGE,
   KupTagNames.IMAGE_LIST,
   KupTagNames.LIST,
@@ -80,7 +88,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.
  */
@@ -90,8 +105,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,

package/dist/collection/types/GenericTypes.js

@@ -19,12 +19,13 @@ 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_EDITOR"] = "KUP-FORM-EDITOR";
+  KupTagNames["FAMILY_TREE"] = "KUP-FAMILY-TREE";
+  KupTagNames["FORM"] = "KUP-FORM";
   KupTagNames["GAUGE"] = "KUP-GAUGE";
   KupTagNames["GRID"] = "KUP-GRID";
   KupTagNames["IFRAME"] = "KUP-IFRAME";

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

@@ -1,13 +1,14 @@
-import { SortMode } from '../../components/kup-data-table/kup-data-table-declarations';
-import { compareValues, getCellValueForDisplay, getColumnByName, getValueForDisplay, getValueForDisplay2, } from '../cell-utils';
+import { getCellValueForDisplay, getColumnByName, getValueForDisplay, } from '../cell-utils';
 import { Filters } from './filters';
 import { FiltersColumnMenu } from './filters-column-menu';
 import { treeMainColumnName } from '../../components/kup-tree/kup-tree-declarations';
 import { KupObjects } from '../../managers/kup-objects/kup-objects';
+import { KupData } from '../../managers/kup-data/kup-data';
 const dom = document.documentElement;
 const kupObjects = dom.ketchup
   ? dom.ketchup.objects
   : new KupObjects();
+const kupData = dom.ketchup ? dom.ketchup.data : new KupData();
 /**
  * Filtering algorithms related to data-table rows.
  * @module FiltersRows
@@ -231,26 +232,6 @@ export class FiltersRows extends Filters {
     for (let i = 0; i < checkboxes.length; i++) {
       values.push(checkboxes[i]);
     }
-    this.extractColumnValues(tmpRows, column, values);
-    values.sort((n1, n2) => {
-      return compareValues(null, getValueForDisplay2(n1, column), null, getValueForDisplay2(n2, column), SortMode.A);
-    });
-    return values;
-  }
-  extractColumnValues(rows, column, values) {
-    /** il valore delle righe attualmente filtrate, formattato */
-    rows.forEach((row) => this.addColumnValueFromRow(values, column, row.cells[column.name]));
-    return values;
-  }
-  addColumnValueFromRow(values, column, cell) {
-    if (cell) {
-      let item = {
-        value: cell.value,
-        displayedValue: getCellValueForDisplay(column, cell),
-      };
-      if (!Filters.valuesArrayContainsValue(values, cell.value)) {
-        values.push(item);
-      }
-    }
+    return kupData.cell.getValue({ rows: tmpRows }, column, true);
   }
 }

package/dist/collection/utils/filters/filters-tree-items.js

@@ -1,6 +1,7 @@
 import { treeMainColumnName, } from '../../components/kup-tree/kup-tree-declarations';
 import { FiltersColumnMenu } from './filters-column-menu';
 import { FiltersRows } from './filters-rows';
+import { addColumnValueFromRow } from '../../managers/kup-data/kup-data-cell-helper';
 /**
  * Filtering algorithms related to tree items rows.
  * @module FiltersTreeItems
@@ -82,7 +83,7 @@ export class FiltersTreeItems extends FiltersRows {
         value: node.value,
       };
       if (node.visible) {
-        this.addColumnValueFromRow(values, column, cellsHolder[column.name]);
+        addColumnValueFromRow(values, column, cellsHolder[column.name]);
         this.extractColumnValues(node.children, column, values);
       }
     });

package/dist/esm/{f-button-871a544b.js → f-button-cd948e50.js}

@@ -1,6 +1,6 @@
-import { h } from './index-baeab1ac.js';
+import { h } from './index-e41330a5.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-c468d8ae.js';
+import { F as FImage } from './f-image-914a03ef.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" },