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

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

@@ -279,6 +279,7 @@ export class KupDebug {
             break;
           case 'kup-debug-locale-changer':
             dom.ketchup.dates.setLocale(compEvent.detail.value);
+            dom.ketchup.math.setLocale(compEvent.detail.value);
             break;
           case 'kup-debug-theme-changer':
             dom.ketchup.theme.set(compEvent.detail.value);

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

@@ -15,6 +15,8 @@ import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
 import { KupSearch } from '../kup-search/kup-search';
 import { KupMathLocales } from '../kup-math/kup-math-declarations';
 import { KupMath } from '../kup-math/kup-math';
+import { KupTooltip } from '../kup-tooltip/kup-tooltip';
+import { setAssetPath } from '@stencil/core';
 const dom = document.documentElement;
 /**
  * This class controls every other Ketchup utility suite.
@@ -25,8 +27,9 @@ export class KupManager {
    * Initializes KupManager.
    */
   constructor(overrides) {
-    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogRestrictContainer = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
+    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogRestrictContainer = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null, tooltipDelay = null;
     if (overrides) {
+      const assetsPath = overrides.assetsPath;
       const dates = overrides.dates;
       const debug = overrides.debug;
       const interact = overrides.interact;
@@ -34,6 +37,10 @@ export class KupManager {
       const objects = overrides.objects;
       const scrollOnHover = overrides.scrollOnHover;
       const theme = overrides.theme;
+      const tooltip = overrides.tooltip;
+      if (assetsPath) {
+        setAssetPath(assetsPath);
+      }
       if (dates) {
         datesLocale = dates.locale ? dates.locale : null;
       }
@@ -67,6 +74,9 @@ export class KupManager {
         themeList = theme.list ? theme.list : null;
         themeName = theme.name ? theme.name : null;
       }
+      if (tooltip) {
+        tooltipDelay = tooltip.delay ? tooltip.delay : null;
+      }
     }
     this.data = new KupData();
     this.dates = new KupDates(datesLocale);
@@ -102,6 +112,7 @@ export class KupManager {
     };
     this.theme = new KupTheme(themeList, themeName);
     this.toolbar = new KupToolbar();
+    this.tooltip = new KupTooltip(tooltipDelay);
     document.addEventListener('pointerdown', (e) => {
       const paths = e.composedPath();
       const lastString = paths[0].innerText || paths[0].value;

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

@@ -6,7 +6,7 @@ import 'numeral/locales/it';
 import 'numeral/locales/pl';
 import 'numeral/locales/ru';
 import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
-import { KupMathLocales } from './kup-math-declarations';
+import { KupMathLocales, } from './kup-math-declarations';
 import { customFormula, normalDistributionFormula } from './kup-math-helper';
 const dom = document.documentElement;
 /**
@@ -26,6 +26,16 @@ export class KupMath {
         return normalDistributionFormula(average, variance, x);
       },
     };
+    this.numbers = {
+      toLocaleString(value) {
+        const maximumFractionDigits = 14;
+        if (value == null || value == '')
+          return value;
+        return Number(value).toLocaleString(dom.ketchup.math.locale, {
+          maximumFractionDigits: maximumFractionDigits,
+        });
+      },
+    };
     this.locale = locale ? locale : KupMathLocales.en;
     this.managedComponents = new Set();
     this.numeral = numeral;

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

@@ -88,6 +88,7 @@ export const fTextFieldUsers = [
   KupTagNames.COMBOBOX,
   KupTagNames.DATA_TABLE,
   KupTagNames.DATE_PICKER,
+  KupTagNames.NUMERIC_PICKER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
   KupTagNames.TREE,

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,191 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupTooltip_instances, _KupTooltip_clickCb, _KupTooltip_dynPos, _KupTooltip_create, _KupTooltip_setOptions;
+import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
+const dom = document.documentElement;
+/**
+ * Handles application-wide tooltip using card component.
+ * @module KupTooltip
+ */
+export class KupTooltip {
+  /**
+   * Initializes KupTooltip.
+   */
+  constructor(delay) {
+    _KupTooltip_instances.add(this);
+    this.currentAnchor = null;
+    this.delay = null;
+    this.element = null;
+    this.managedElements = null;
+    this.timeout = null;
+    _KupTooltip_clickCb.set(this, null);
+    this.delay = delay ? delay : 125;
+    this.managedElements = new Set();
+    document.addEventListener('pointermove', (e) => {
+      const paths = e.composedPath();
+      // Leaving the function when hovering on the tooltip itself
+      if (paths.includes(this.element)) {
+        return;
+      }
+      const enterHandler = (anchor) => {
+        this.timeout = null;
+        requestAnimationFrame(anchor.kupTooltip.enter.bind(anchor.kupTooltip.enter, e));
+      };
+      const overHandler = (anchor) => {
+        requestAnimationFrame(anchor.kupTooltip.over.bind(anchor.kupTooltip.over, e));
+      };
+      const leaveHandler = () => {
+        requestAnimationFrame(this.currentAnchor.kupTooltip.leave.bind(this.currentAnchor.kupTooltip.leave, e));
+      };
+      // If the current anchor exists and is not included in the event path,
+      // the leaving callback is fired.
+      if (this.currentAnchor && !paths.includes(this.currentAnchor)) {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+          this.timeout = null;
+        }
+        else {
+          if (this.currentAnchor.kupTooltip.leave) {
+            leaveHandler();
+          }
+        }
+        this.currentAnchor = null;
+      }
+      else if (!this.timeout) {
+        for (let index = 0; index < paths.length; index++) {
+          const element = paths[index];
+          if (this.managedElements.has(element)) {
+            // 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) {
+                overHandler(element);
+              }
+              // Otherwise, the mouse enter callback will be invoked
+            }
+            else {
+              this.currentAnchor = element;
+              if (element.kupTooltip.enter) {
+                if (this.delay) {
+                  this.timeout = setTimeout(enterHandler.bind(enterHandler, element), this.delay);
+                }
+                else {
+                  enterHandler(element);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+  hide() {
+    if (this.element) {
+      this.element.menuVisible = false;
+      dom.ketchup.dynamicPosition.stop(this.element);
+      dom.ketchup.removeClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"));
+    }
+  }
+  show(anchor, options) {
+    // Creates the card or updates it with new options
+    if (!this.element) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_create).call(this, options);
+    }
+    else if (options) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_setOptions).call(this, options);
+    }
+    // If an anchor was provided, initializes or updates dynamic positioning
+    if (anchor) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_dynPos).call(this, anchor);
+    }
+    // If the tooltip is already visible, it's pointless to go on
+    if (this.element.menuVisible) {
+      return;
+    }
+    // If the dynamic positioning is still to be registered, a warning is thrown
+    if (!dom.ketchup.dynamicPosition.isRegistered(this.element)) {
+      dom.ketchup.debug.logMessage('kup-tooltip', 'Unable to display KupTooltip without specifying a valid anchor point.', KupDebugCategory.WARNING);
+      return;
+    }
+    this.element.menuVisible = true;
+    dom.ketchup.addClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"), true);
+  }
+  /**
+   * Returns whether an element was previously registered or not.
+   * @param {KupTooltipAnchor} element - Element to test.
+   * @returns {boolean} True if the element was registered.
+   */
+  isRegistered(element) {
+    return !this.managedElements
+      ? false
+      : this.managedElements.has(element);
+  }
+  /**
+   * 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.
+   */
+  register(element, cbEnter, cbOver, cbLeave) {
+    this.managedElements.add(element);
+    const kupTooltip = {
+      enter: cbEnter,
+      leave: cbLeave,
+      over: cbOver,
+    };
+    element.kupTooltip = kupTooltip;
+  }
+  /**
+   * Unregisters an HTMLElement, preventing its attached callback from being invoked.
+   *
+   * @param {KupTooltipAnchor} element - - The HTML element to be unregistered.
+   */
+  unregister(element) {
+    if (this.managedElements) {
+      this.managedElements.delete(element);
+    }
+  }
+}
+_KupTooltip_clickCb = new WeakMap(), _KupTooltip_instances = new WeakSet(), _KupTooltip_dynPos = function _KupTooltip_dynPos(anchor) {
+  if (dom.ketchup.dynamicPosition.isRegistered(this.element)) {
+    dom.ketchup.dynamicPosition.changeAnchor(this.element, anchor);
+  }
+  else {
+    dom.ketchup.dynamicPosition.register(this.element, anchor, null, null, true);
+  }
+  dom.ketchup.dynamicPosition.start(this.element);
+}, _KupTooltip_create = function _KupTooltip_create(options) {
+  this.element = document.createElement('kup-card');
+  this.element.id = 'kup-tooltip';
+  this.element.isMenu = true;
+  this.element.layoutNumber = 15;
+  this.element.sizeX = 'auto';
+  this.element.sizeY = 'auto';
+  if (options) {
+    __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_setOptions).call(this, options);
+  }
+  document.body.appendChild(this.element);
+  __classPrivateFieldSet(this, _KupTooltip_clickCb, {
+    cb: () => {
+      this.hide();
+    },
+    el: this.element,
+  }, "f");
+}, _KupTooltip_setOptions = function _KupTooltip_setOptions(options) {
+  for (const key in options) {
+    if (Object.prototype.hasOwnProperty.call(options, key)) {
+      const prop = options[key];
+      this.element[key] = prop;
+    }
+  }
+};

package/dist/collection/types/GenericTypes.js

@@ -32,6 +32,7 @@ export var KupTagNames;
   KupTagNames["LIST"] = "KUP-LIST";
   KupTagNames["MAGIC_BOX"] = "KUP-MAGIC-BOX";
   KupTagNames["NAV_BAR"] = "KUP-NAV-BAR";
+  KupTagNames["NUMERIC_PICKER"] = "KUP-NUMERIC-PICKER";
   KupTagNames["PROBE"] = "KUP-PROBE";
   KupTagNames["PROGRESS_BAR"] = "KUP-PROGRESS-BAR";
   KupTagNames["QLIK"] = "KUP-QLIK";

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

@@ -342,7 +342,7 @@ export class KupColumnMenu {
     let props = [];
     if (comp.showFilters) {
       if (this.filtersColumnMenuInstance.isColumnFiltrableByInterval(column)) {
-        props.concat(this.prepIntervalTextfield(comp, column));
+        props = props.concat(this.prepIntervalTextfield(comp, column));
       }
       else if (dom.ketchup.objects.isStringObject(column.obj)) {
         let filterInitialValue = this.filtersColumnMenuInstance.getTextFilterValue(comp.filters, column.name);

package/dist/esm/{cell-utils-69f75e2e.js → cell-utils-f4bdbbc8.js}

@@ -1,5 +1,5 @@
-import { k as unformattedStringToFormattedStringNumber, m as unformattedStringToFormattedStringTime, o as unformattedStringToFormattedStringTimestamp, d as stringToNumber } from './utils-35c7a90d.js';
-import { d as KupDatesFormats } from './kup-manager-0ab94726.js';
+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';
 
 const dom = document.documentElement;
 // -------------

package/dist/esm/{f-button-7e7607d8.js → f-button-54a49fd8.js}

@@ -1,6 +1,6 @@
-import { h } from './index-aeec9835.js';
+import { h } from './index-baeab1ac.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-de331954.js';
+import { F as FImage } from './f-image-d32465e3.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-e4d83c27.js → f-cell-d5dac50b.js}

@@ -1,97 +1,10 @@
-import { a as KupThemeIconValues, c as KupTagNames, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
-import { h, a as getAssetPath } from './index-aeec9835.js';
-import { b as getCellValueForDisplay } from './cell-utils-69f75e2e.js';
-import { d as stringToNumber } from './utils-35c7a90d.js';
-import { F as FImage } from './f-image-de331954.js';
-import { F as FChip } from './f-chip-51dfefaf.js';
-
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-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                  */
-/*-------------------------------------------------*/
-function setContent(props) {
-  const isOutlined = props.textArea || props.outlined;
-  let labelEl;
-  let iconEl;
-  if (props.label && !props.leadingLabel && !props.trailingLabel) {
-    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
-  }
-  if (props.icon) {
-    let iconStyle;
-    let iconClass = '';
-    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
-      iconClass = props.icon.replace('--', '');
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
-      iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-    }
-    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
-  }
-  const classObj = {
-    'is-clearable': props.isClearable,
-    'mdc-text-field': true,
-    'mdc-text-field--disabled': props.disabled,
-    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
-    'mdc-text-field--no-label': !props.label,
-    'mdc-text-field--fullwidth': props.fullWidth,
-    'mdc-text-field--outlined': isOutlined,
-    'mdc-text-field--textarea': props.textArea,
-    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
-    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
-  };
-  return (h("div", { class: classObj },
-    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
-      "'0 / ' + ",
-      props.maxLength)) : undefined,
-    !props.trailingIcon ? iconEl : undefined,
-    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
-    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
-    props.trailingIcon ? iconEl : undefined,
-    !props.fullWidth && !isOutlined ? labelEl : undefined,
-    isOutlined ? (h("div", { class: "mdc-notched-outline" },
-      h("div", { class: "mdc-notched-outline__leading" }),
-      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
-      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
-}
-function setHelper(props) {
-  if (props.helperEnabled !== false) {
-    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) {
-        return (h("div", { class: "mdc-text-field-helper-line" },
-          h("div", { class: "mdc-text-field-character-counter" },
-            "'0 / ' + ",
-            props.maxLength)));
-      }
-    }
-  }
-}
+import { c as KupTagNames, b as KupThemeColorValues } from './kup-manager-9316a184.js';
+import { h } from './index-baeab1ac.js';
+import { b as getCellValueForDisplay } from './cell-utils-f4bdbbc8.js';
+import { F as FTextField } from './f-text-field-c25cc63f.js';
+import { d as stringToNumber } from './utils-f24319a0.js';
+import { F as FImage } from './f-image-d32465e3.js';
+import { F as FChip } from './f-chip-a3035b4b.js';
 
 const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
@@ -734,4 +647,4 @@ function cellEvent(e, props, cellType, cellEventName) {
   }
 }
 
-export { FTextField as F, FCell as a, FCheckbox as b, FCellPadding as c };
+export { FCell as F, FCheckbox as a, FCellPadding as b };

package/dist/esm/{f-chip-51dfefaf.js → f-chip-a3035b4b.js}

@@ -1,6 +1,6 @@
-import { h } from './index-aeec9835.js';
-import { F as FImage } from './f-image-de331954.js';
-import { a as KupThemeIconValues, i as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
+import { h } from './index-baeab1ac.js';
+import { F as FImage } from './f-image-d32465e3.js';
+import { a as KupThemeIconValues, i as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-9316a184.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-de331954.js → f-image-d32465e3.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-aeec9835.js';
-import { b as KupThemeColorValues } from './kup-manager-0ab94726.js';
+import { h, a as getAssetPath } from './index-baeab1ac.js';
+import { b as KupThemeColorValues } from './kup-manager-9316a184.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/esm/f-text-field-c25cc63f.js

@@ -0,0 +1,92 @@
+import { h, a as getAssetPath } from './index-baeab1ac.js';
+import { a as KupThemeIconValues } from './kup-manager-9316a184.js';
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+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                  */
+/*-------------------------------------------------*/
+function setContent(props) {
+  const isOutlined = props.textArea || props.outlined;
+  let labelEl;
+  let iconEl;
+  if (props.label && !props.leadingLabel && !props.trailingLabel) {
+    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
+  }
+  if (props.icon) {
+    let iconStyle;
+    let iconClass = '';
+    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
+      iconClass = props.icon.replace('--', '');
+    }
+    else {
+      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+      iconStyle = {
+        mask: svg,
+        webkitMask: svg,
+      };
+    }
+    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
+  }
+  const classObj = {
+    'is-clearable': props.isClearable,
+    'mdc-text-field': true,
+    'mdc-text-field--disabled': props.disabled,
+    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
+    'mdc-text-field--no-label': !props.label,
+    'mdc-text-field--fullwidth': props.fullWidth,
+    'mdc-text-field--outlined': isOutlined,
+    'mdc-text-field--textarea': props.textArea,
+    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
+    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
+  };
+  return (h("div", { class: classObj },
+    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
+      "'0 / ' + ",
+      props.maxLength)) : undefined,
+    !props.trailingIcon ? iconEl : undefined,
+    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
+      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
+    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
+    props.trailingIcon ? iconEl : undefined,
+    !props.fullWidth && !isOutlined ? labelEl : undefined,
+    isOutlined ? (h("div", { class: "mdc-notched-outline" },
+      h("div", { class: "mdc-notched-outline__leading" }),
+      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
+      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
+}
+function setHelper(props) {
+  if (props.helperEnabled !== false) {
+    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) {
+        return (h("div", { class: "mdc-text-field-helper-line" },
+          h("div", { class: "mdc-text-field-character-counter" },
+            "'0 / ' + ",
+            props.maxLength)));
+      }
+    }
+  }
+}
+
+export { FTextField as F };