@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

package/dist/cjs/kup-autocomplete_25.cjs.entry.js

@@ -2,20 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-eb556444.js');
-const kupManager = require('./kup-manager-7a941909.js');
-const fTextField = require('./f-text-field-e1e45ade.js');
+const index = require('./index-31125378.js');
+const kupManager = require('./kup-manager-7c514a30.js');
+const fTextField = require('./f-text-field-b4229cef.js');
 const fTextFieldMdc = require('./f-text-field-mdc-85997738.js');
-const utils = require('./utils-6287d878.js');
 const GenericVariables = require('./GenericVariables-a9ed17ee.js');
-const fImage = require('./f-image-89f25556.js');
-const fButton = require('./f-button-ac179257.js');
+const fImage = require('./f-image-0e71df7e.js');
+const fButton = require('./f-button-94cb5f35.js');
 const fButtonDeclarations = require('./f-button-declarations-b611587f.js');
-const fChip = require('./f-chip-b00897d7.js');
+const fChip = require('./f-chip-68d45fd3.js');
 const component = require('./component-72a5b626.js');
-const cellUtils = require('./cell-utils-a78d6fac.js');
-const fCell = require('./f-cell-69294bca.js');
-const fPaginatorUtils = require('./f-paginator-utils-8fa501b3.js');
+const fCheckbox = require('./f-checkbox-cd977193.js');
+const fPaginatorUtils = require('./f-paginator-utils-46689c0a.js');
+const fCell = require('./f-cell-76830a0d.js');
 require('./tslib.es6-0ee02c67.js');
 
 /**
@@ -108,15 +107,21 @@ function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
   if (selected == null && idIn == null && listData) {
     selected = getFirstItemSelected(listData);
   }
+  let trueValue = null;
   if (selected == null) {
     selected = {
       id: idIn == null ? '' : idIn,
       value: idIn == null ? '' : idIn,
     };
+    id = selected.id;
+    displayedValue = selected.id;
+    trueValue = selected.id;
+  }
+  else {
+    id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
+    displayedValue = getIdOfItemByDisplayMode(selected, displayMode, ' - ');
+    trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   }
-  id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
-  displayedValue = getIdOfItemByDisplayMode(selected, displayMode, ' - ');
-  const trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   return {
     value: id,
     displayedValue: displayedValue,
@@ -196,6 +201,23 @@ function getItemByDisplayMode(listData, id, displayMode, setSelected) {
 
 const kupAutocompleteCss = ":host{display:block;width:max-content}.kup-icon{transition:transform 0.15s}.toggled .kup-icon.kup-dropdown-icon{transform:rotate(-180deg)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}.f-text-field{position:relative}:host(.kup-full-height){height:100%}:host(.kup-full-height) #kup-component,:host(.kup-full-height) .f-text-field,:host(.kup-full-height) .mdc-text-field{height:100%}:host(.kup-full-width){width:100%}:host(.kup-full-width) #kup-component{width:100%}:host(.kup-danger){--kup-textfield-primary-color:var(--kup-danger-color);--kup-textfield-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-textfield-primary-color:var(--kup-info-color);--kup-textfield-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-textfield-primary-color:var(--kup-secondary-color);--kup-textfield-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-textfield-primary-color:var(--kup-success-color);--kup-textfield-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-textfield-primary-color:var(--kup-warning-color);--kup-textfield-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
+var __classPrivateFieldGet$2 = (undefined && undefined.__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$2 = (undefined && undefined.__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 _KupAutocomplete_instances, _KupAutocomplete_doConsistencyCheck, _KupAutocomplete_elStyle, _KupAutocomplete_listEl, _KupAutocomplete_kupManager, _KupAutocomplete_textfieldWrapper, _KupAutocomplete_textfieldEl, _KupAutocomplete_clickCb, _KupAutocomplete_inputTimeout, _KupAutocomplete_openList, _KupAutocomplete_closeList, _KupAutocomplete_isListOpened, _KupAutocomplete_consistencyCheck, _KupAutocomplete_prepList;
 const KupAutocomplete = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -206,6 +228,7 @@ const KupAutocomplete = class {
     this.kupInput = index.createEvent(this, "kup-autocomplete-input", 6);
     this.kupIconClick = index.createEvent(this, "kup-autocomplete-iconclick", 6);
     this.kupItemClick = index.createEvent(this, "kup-autocomplete-itemclick", 6);
+    _KupAutocomplete_instances.add(this);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
@@ -273,34 +296,35 @@ const KupAutocomplete = class {
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
-    this.doConsistencyCheck = true;
-    this.elStyle = undefined;
-    this.listEl = null;
+    _KupAutocomplete_doConsistencyCheck.set(this, true);
+    _KupAutocomplete_elStyle.set(this, undefined);
+    _KupAutocomplete_listEl.set(this, null);
     /**
      * Instance of the KupManager class.
      */
-    this.kupManager = kupManager.kupManagerInstance();
-    this.textfieldWrapper = undefined;
-    this.textfieldEl = undefined;
-    this.clickCb = null;
+    _KupAutocomplete_kupManager.set(this, kupManager.kupManagerInstance());
+    _KupAutocomplete_textfieldWrapper.set(this, undefined);
+    _KupAutocomplete_textfieldEl.set(this, undefined);
+    _KupAutocomplete_clickCb.set(this, null);
+    _KupAutocomplete_inputTimeout.set(this, void 0);
   }
   onKupBlur() {
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupChange(value) {
-    this.doConsistencyCheck = true;
-    const ret = this.consistencyCheck(undefined, value);
+    __classPrivateFieldSet$2(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    const ret = __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
     if (ret.exists || this.allowInconsistentValues) {
       this.kupChange.emit({
         comp: this,
         id: this.rootElement.id,
         value: this.value,
-        inputValue: this.textfieldEl.value,
+        inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
       });
     }
   }
@@ -309,7 +333,7 @@ const KupAutocomplete = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupFocus() {
@@ -317,82 +341,78 @@ const KupAutocomplete = class {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupInput() {
-    this.doConsistencyCheck = true;
-    this.consistencyCheck(undefined, this.textfieldEl.value);
-    if (this.openList(false)) {
-      if (this.listEl != null && !this.serverHandledFilter) {
-        this.listEl.filter = this.displayedValue;
-      }
-    }
-    if (this.textfieldEl.value.length >= this.minimumChars) {
+    __classPrivateFieldSet$2(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value, false);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
       this.kupInput.emit({
         comp: this,
         id: this.rootElement.id,
         value: this.value,
-        inputValue: this.textfieldEl.value,
+        inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
       });
     }
   }
   onKupIconClick() {
-    if (this.textfieldWrapper.classList.contains('toggled')) {
-      this.closeList();
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled')) {
+      __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
     }
     else {
-      this.openList(true);
+      __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, true);
     }
     this.kupIconClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
-      open: this.textfieldWrapper.classList.contains('toggled'),
+      inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
+      open: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled'),
     });
   }
   onKupItemClick(e) {
     this.onKupChange(e.detail.selected.id);
-    this.closeList();
-    if (this.textfieldEl) {
-      this.textfieldEl.focus();
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f")) {
+      __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").focus();
     }
     this.kupItemClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   /*-------------------------------------------------*/
   /*                L i s t e n e r s                */
   /*-------------------------------------------------*/
   listenKeydown(e) {
-    if (this.isListOpened()) {
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.focusNext();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.focusPrevious();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.select().then(() => {
-            this.closeList();
-            this.textfieldEl.focus();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").select().then(() => {
+            __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+            __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").focus();
           });
           break;
         case 'Escape':
           e.preventDefault();
           e.stopPropagation();
-          this.closeList();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
           break;
       }
     }
@@ -401,14 +421,14 @@ const KupAutocomplete = class {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          this.openList(false);
-          this.listEl.focusNext();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          this.openList(false);
-          this.listEl.focusPrevious();
+          __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
       }
     }
@@ -422,7 +442,7 @@ const KupAutocomplete = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupAutocompleteProps, descriptions);
+    return kupManager.getProps(this, KupAutocompleteProps, descriptions);
   }
   /**
    * Used to retrieve the value of the component.
@@ -441,95 +461,30 @@ const KupAutocomplete = class {
    * Sets the focus to the component.
    */
   async setFocus() {
-    this.textfieldEl.focus();
+    __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").focus();
   }
   /**
    * Sets the props to the component.
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupAutocompleteProps, props);
+    kupManager.setProps(this, KupAutocompleteProps, props);
   }
   /**
    * Sets the value of the component.
    * @param {string} value - Value of the component.
    */
   async setValue(value) {
-    this.doConsistencyCheck = true;
-    this.consistencyCheck(undefined, value);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  openList(forceOpen) {
-    if (forceOpen != true &&
-      this.textfieldEl.value.length < this.minimumChars) {
-      this.closeList();
-      return false;
-    }
-    this.textfieldWrapper.classList.add('toggled');
-    this.listEl.menuVisible = true;
-    const elStyle = this.listEl.style;
-    elStyle.height = 'auto';
-    elStyle.minWidth = this.textfieldWrapper.clientWidth + 'px';
-    if (this.kupManager.dynamicPosition.isRegistered(this.listEl)) {
-      this.kupManager.dynamicPosition.changeAnchor(this.listEl, this.textfieldWrapper);
-    }
-    else {
-      this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper, 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
-    }
-    this.kupManager.dynamicPosition.start(this.listEl);
-    if (!this.clickCb) {
-      this.clickCb = {
-        cb: () => {
-          this.closeList();
-        },
-        el: this.listEl,
-      };
-    }
-    this.kupManager.addClickCallback(this.clickCb, true);
-    return true;
-  }
-  closeList() {
-    this.textfieldWrapper.classList.remove('toggled');
-    this.listEl.menuVisible = false;
-    this.kupManager.dynamicPosition.stop(this.listEl);
-    this.kupManager.removeClickCallback(this.clickCb);
-  }
-  isListOpened() {
-    return this.listEl.menuVisible == true;
-  }
-  consistencyCheck(e, idIn) {
-    if (!this.doConsistencyCheck) {
-      return;
-    }
-    this.doConsistencyCheck = false;
-    const ret = consistencyCheck(idIn, this.data['kup-list'], this.listEl, this.selectMode, this.displayMode, e);
-    if (ret.exists || this.allowInconsistentValues) {
-      this.value = ret.value;
-      this.displayedValue = ret.displayedValue;
-      if (this.listEl != null && !this.serverHandledFilter) {
-        this.listEl.filter = this.displayedValue;
-      }
-    }
-    else {
-      this.displayedValue = idIn;
-      if (this.listEl != null && !this.serverHandledFilter) {
-        this.listEl.filter = idIn;
-      }
-    }
-    return ret;
-  }
-  prepList() {
-    return (index.h("kup-list", Object.assign({ displayMode: this.displayMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (this.listEl = el) })));
+    __classPrivateFieldSet$2(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-    this.doConsistencyCheck = true;
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.register(this);
+    __classPrivateFieldSet$2(this, _KupAutocomplete_doConsistencyCheck, true, "f");
     this.value = this.initialValue;
     if (!this.data) {
       this.data = {
@@ -539,43 +494,103 @@ const KupAutocomplete = class {
     }
   }
   componentDidLoad() {
-    this.consistencyCheck(undefined, this.value);
-    this.kupManager.debug.logLoad(this, true);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, true);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
     if (root) {
       const f = root.querySelector('.f-text-field');
       if (f) {
-        this.textfieldWrapper = f;
-        this.textfieldEl = f.querySelector('input');
+        __classPrivateFieldSet$2(this, _KupAutocomplete_textfieldWrapper, f, "f");
+        __classPrivateFieldSet$2(this, _KupAutocomplete_textfieldEl, f.querySelector('input'), "f");
         fTextFieldMdc.FTextFieldMDC(f);
       }
     }
-    this.kupManager.debug.logRender(this, true);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     const fullHeight = this.rootElement.classList.contains('kup-full-height');
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
-    return (index.h(index.Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: this.elStyle }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, style: this.elStyle }, index.h(fTextField.FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
+    return (index.h(index.Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h("style", null, __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h(fTextField.FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
         ? kupManager.KupThemeIconValues.DROPDOWN
         : null, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
-        window.clearTimeout(this.inputTimeout);
-        this.inputTimeout = window.setTimeout(() => this.onKupInput(), this.inputDelay);
-      }, onIconClick: () => this.onKupIconClick() }), this.prepList()))));
+        window.clearTimeout(__classPrivateFieldGet$2(this, _KupAutocomplete_inputTimeout, "f"));
+        __classPrivateFieldSet$2(this, _KupAutocomplete_inputTimeout, window.setTimeout(() => this.onKupInput(), this.inputDelay), "f");
+      }, onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
   }
   disconnectedCallback() {
-    if (this.listEl) {
-      this.kupManager.dynamicPosition.unregister([this.listEl]);
-      this.listEl.remove();
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f")) {
+      __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f")]);
+      __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").remove();
     }
-    this.kupManager.theme.unregister(this);
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.unregister(this);
   }
   get rootElement() { return index.getElement(this); }
 };
+_KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(), _KupAutocomplete_kupManager = new WeakMap(), _KupAutocomplete_textfieldWrapper = new WeakMap(), _KupAutocomplete_textfieldEl = new WeakMap(), _KupAutocomplete_clickCb = new WeakMap(), _KupAutocomplete_inputTimeout = new WeakMap(), _KupAutocomplete_instances = new WeakSet(), _KupAutocomplete_openList = function _KupAutocomplete_openList(forceOpen) {
+  if (forceOpen != true &&
+    __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
+    __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    return false;
+  }
+  __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
+  __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").menuVisible = true;
+  const elStyle = __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").style;
+  elStyle.height = 'auto';
+  elStyle.minWidth = __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f").clientWidth + 'px';
+  if (__classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"))) {
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f"));
+  }
+  else {
+    __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f"), 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
+  }
+  __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"));
+  if (!__classPrivateFieldGet$2(this, _KupAutocomplete_clickCb, "f")) {
+    __classPrivateFieldSet$2(this, _KupAutocomplete_clickCb, {
+      cb: () => {
+        __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+      },
+      el: __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"),
+    }, "f");
+  }
+  __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").addClickCallback(__classPrivateFieldGet$2(this, _KupAutocomplete_clickCb, "f"), true);
+  return true;
+}, _KupAutocomplete_closeList = function _KupAutocomplete_closeList() {
+  __classPrivateFieldGet$2(this, _KupAutocomplete_textfieldWrapper, "f").classList.remove('toggled');
+  __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").menuVisible = false;
+  __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"));
+  __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").removeClickCallback(__classPrivateFieldGet$2(this, _KupAutocomplete_clickCb, "f"));
+}, _KupAutocomplete_isListOpened = function _KupAutocomplete_isListOpened() {
+  return __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").menuVisible == true;
+}, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, setValue) {
+  if (!__classPrivateFieldGet$2(this, _KupAutocomplete_doConsistencyCheck, "f")) {
+    return;
+  }
+  __classPrivateFieldSet$2(this, _KupAutocomplete_doConsistencyCheck, false, "f");
+  const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f"), this.selectMode, this.displayMode);
+  if (ret.exists || this.allowInconsistentValues) {
+    if (setValue) {
+      this.value = ret.value;
+      this.displayedValue = ret.displayedValue;
+    }
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").filter = ret.value;
+    }
+  }
+  else {
+    this.displayedValue = idIn;
+    if (__classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet$2(this, _KupAutocomplete_listEl, "f").filter = ret.value;
+    }
+  }
+  return ret;
+}, _KupAutocomplete_prepList = function _KupAutocomplete_prepList() {
+  return (index.h("kup-list", Object.assign({ displayMode: this.displayMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet$2(this, _KupAutocomplete_listEl, el, "f")) })));
+};
 KupAutocomplete.style = kupAutocompleteCss;
 
 /**
@@ -637,7 +652,7 @@ const KupBadge = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupBadgeProps, descriptions);
+    return kupManager.getProps(this, KupBadgeProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -650,7 +665,7 @@ const KupBadge = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupBadgeProps, props);
+    kupManager.setProps(this, KupBadgeProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -830,7 +845,7 @@ const KupButton = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupButtonProps, descriptions);
+    return kupManager.getProps(this, KupButtonProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -843,7 +858,7 @@ const KupButton = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupButtonProps, props);
+    kupManager.setProps(this, KupButtonProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -911,6 +926,7 @@ const KupButton = class {
         : false,
       styling: this.styling,
       showSpinner: this.showSpinner,
+      title: this.rootElement.title,
       toggable: this.toggable,
       trailingIcon: this.trailingIcon,
       warning: this.rootElement.classList.contains('kup-warning')
@@ -1063,7 +1079,7 @@ const KupButtonList = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupButtonListProps, props);
+    kupManager.setProps(this, KupButtonListProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -1284,7 +1300,7 @@ function prepareCalendar(component) {
   }
   if (!el.kupData.value)
     setValue$2(component, new Date());
-  const months = utils.getMonthsAsStringByLocale();
+  const months = kupManager.getMonthsAsStringByLocale();
   const curYear = getYear(component);
   const curMonth = getMonth(component);
   const yearRange = getInitEndYear(curYear);
@@ -1474,7 +1490,7 @@ function createDaysCalendar(component) {
     index.h("tbody", null, tbody)));
 }
 function createMonthsCalendar(component) {
-  const months = utils.getMonthsAsStringByLocale(utils.DateTimeFormatOptionsMonth.SHORT);
+  const months = kupManager.getMonthsAsStringByLocale(kupManager.DateTimeFormatOptionsMonth.SHORT);
   let selectedDay = getDay(component);
   const selectedMonth = getMonth(component);
   const selectedYear = getYear(component);
@@ -5130,7 +5146,7 @@ const KupCard = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, kupManager.KupCardProps, descriptions);
+    return kupManager.getProps(this, kupManager.KupCardProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -5152,7 +5168,7 @@ const KupCard = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, kupManager.KupCardProps, props);
+    kupManager.setProps(this, kupManager.KupCardProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -5548,14 +5564,14 @@ const convertColumns = (data, { series, axis }) => {
   }
   const columns = [];
   // axis
-  const axisColumn = cellUtils.getColumnByName(data.columns, axis);
+  const axisColumn = kupManager.getColumnByName(data.columns, axis);
   if (axisColumn) {
     columns.push(axisColumn);
   }
   // series
   series.map((serie) => {
     // searching colum
-    const c = cellUtils.getColumnByName(data.columns, serie.code);
+    const c = kupManager.getColumnByName(data.columns, serie.code);
     if (c) {
       columns.push(c);
     }
@@ -5578,7 +5594,7 @@ const convertRows = (data, columns, showMarks) => {
         if (cell && cell.obj) {
           const addMark = showMarks && index > 0;
           if (kupObjects.isNumber(cell.obj)) {
-            const value = cellUtils.formatToNumber(cell);
+            const value = kupManager.formatToNumber(cell);
             currentRow.push(value);
             if (addMark) {
               currentRow.push(value.toString());
@@ -5693,7 +5709,7 @@ const KupChart = class {
   /*-------------------------------------------------*/
   identifyRows() {
     if (this.data) {
-      utils.identify(this.data.rows);
+      kupManager.identify(this.data.rows);
     }
   }
   /*-------------------------------------------------*/
@@ -5705,7 +5721,7 @@ const KupChart = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupChartProps, descriptions);
+    return kupManager.getProps(this, KupChartProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -5736,7 +5752,7 @@ const KupChart = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupChartProps, props);
+    kupManager.setProps(this, KupChartProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -5953,11 +5969,11 @@ const KupChart = class {
             this.gChartDataTable.getColumnProperty(originalColIndex, 'role')) {
             --originalColIndex;
           }
-          event.column = cellUtils.getColumnByName(this.data.columns, this.series[originalColIndex - 1].code);
+          event.column = kupManager.getColumnByName(this.data.columns, this.series[originalColIndex - 1].code);
           event.colindex = originalColIndex;
         }
         else {
-          event.column = cellUtils.getColumnByName(this.data.columns, this.series[0].code);
+          event.column = kupManager.getColumnByName(this.data.columns, this.series[0].code);
           event.colindex = 0;
         }
       }
@@ -6251,7 +6267,7 @@ const KupCheckbox = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupCheckboxProps, descriptions);
+    return kupManager.getProps(this, KupCheckboxProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -6264,7 +6280,7 @@ const KupCheckbox = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupCheckboxProps, props);
+    kupManager.setProps(this, KupCheckboxProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -6314,7 +6330,7 @@ const KupCheckbox = class {
       onChange: () => this.onKupChange(),
       onFocus: () => this.onKupFocus(),
     };
-    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h(fCell.FCheckbox, Object.assign({}, props)))));
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h(fCheckbox.FCheckbox, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -6430,7 +6446,7 @@ const KupChip = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupChipProps, descriptions);
+    return kupManager.getProps(this, KupChipProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -6443,7 +6459,7 @@ const KupChip = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupChipProps, props);
+    kupManager.setProps(this, KupChipProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -6607,7 +6623,7 @@ const KupColorPicker = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupColorPickerProps, descriptions);
+    return kupManager.getProps(this, KupColorPickerProps, descriptions);
   }
   /**
    * Retrieves the component's value.
@@ -6627,7 +6643,7 @@ const KupColorPicker = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupColorPickerProps, props);
+    kupManager.setProps(this, KupColorPickerProps, props);
   }
   /**
    * Sets the component's value.
@@ -6934,7 +6950,7 @@ const KupCombobox = class {
     });
   }
   onKupChange(value) {
-    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
@@ -6967,14 +6983,14 @@ const KupCombobox = class {
     });
   }
   onKupInput() {
-    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, __classPrivateFieldGet$1(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet$1(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet$1(this, _KupCombobox_textfieldEl, "f").value,
     });
-    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
   }
   onKupIconClick() {
     if (__classPrivateFieldGet$1(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
@@ -7067,7 +7083,7 @@ const KupCombobox = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupComboboxProps, descriptions);
+    return kupManager.getProps(this, KupComboboxProps, descriptions);
   }
   /**
    * Retrieves the component's value.
@@ -7093,14 +7109,14 @@ const KupCombobox = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupComboboxProps, props);
+    kupManager.setProps(this, KupComboboxProps, props);
   }
   /**
    * Sets the component's value.
    * @param {string} value - Value to be set.
    */
   async setValue(value) {
-    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -7117,7 +7133,7 @@ const KupCombobox = class {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, this.value, true);
+    __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
     __classPrivateFieldGet$1(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -7140,7 +7156,7 @@ const KupCombobox = class {
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
     return (index.h(index.Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$1(this, _KupCombobox_elStyle, "f") }, index.h("style", null, __classPrivateFieldGet$1(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, style: __classPrivateFieldGet$1(this, _KupCombobox_elStyle, "f") }, index.h(fTextField.FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
         ? kupManager.KupThemeIconValues.DROPDOWN
-        : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }), __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)))));
+        : null, readOnly: this.isSelect, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$1(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
   }
   disconnectedCallback() {
     if (__classPrivateFieldGet$1(this, _KupCombobox_listEl, "f")) {
@@ -7187,20 +7203,22 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
   __classPrivateFieldGet$1(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet$1(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
   return __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f").menuVisible == true;
-}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(e, idIn, setValue) {
-  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode, e);
-  if (ret.exists && setValue) {
-    this.value = ret.value;
-    this.displayedValue = ret.displayedValue;
+}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, setValue) {
+  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
+  if (ret.exists) {
+    if (setValue) {
+      this.value = ret.value;
+      this.displayedValue = ret.displayedValue;
+    }
     if (__classPrivateFieldGet$1(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f").filter = this.displayedValue;
+      __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   else {
     this.value = idIn;
     this.displayedValue = idIn;
     if (__classPrivateFieldGet$1(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f").filter = idIn;
+      __classPrivateFieldGet$1(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   return ret;
@@ -7215,8 +7233,8 @@ class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = kupManager.GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';
@@ -7431,7 +7449,7 @@ class KupColumnMenu {
         });
       }
       for (let index = 0; index < columnValues.length; index++) {
-        let label = cellUtils.getValueForDisplay2(columnValues[index], column);
+        let label = kupManager.getValueForDisplay2(columnValues[index], column);
         if (dom.ketchup.objects.isCheckbox(column.obj)) {
           if (columnValues[index].value == '1') {
             label = dom.ketchup.language.translate(kupManager.KupLanguageCheckbox.CHECKED);
@@ -7441,11 +7459,11 @@ class KupColumnMenu {
           }
         }
         props.push({
-          checked: fPaginatorUtils.Filters.valuesArrayContainsValue(checkBoxesFilter, columnValues[index].value),
+          checked: kupManager.Filters.valuesArrayContainsValue(checkBoxesFilter, columnValues[index].value),
           'data-storage': {
             column: column,
             value: columnValues[index].value,
-            displayedValue: cellUtils.getValueForDisplay2(columnValues[index], column),
+            displayedValue: kupManager.getValueForDisplay2(columnValues[index], column),
           },
           label: label,
         });
@@ -7576,7 +7594,7 @@ class KupColumnMenu {
       }
       else if (dom.ketchup.objects.isStringObject(column.obj)) {
         let filterInitialValue = this.filtersColumnMenuInstance.getTextFilterValue(comp.filters, column.name);
-        filterInitialValue = cellUtils.getValueForDisplay(filterInitialValue, column.obj, column.decimals);
+        filterInitialValue = kupManager.getValueForDisplay(filterInitialValue, column.obj, column.decimals);
         props.push({
           'data-storage': {
             column: column,
@@ -7621,12 +7639,12 @@ class KupColumnMenu {
       return props;
     }
     let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[fPaginatorUtils.FilterInterval.FROM];
-    let initialValueTo = interval[fPaginatorUtils.FilterInterval.TO];
+    let initialValueFrom = interval[kupManager.FilterInterval.FROM];
+    let initialValueTo = interval[kupManager.FilterInterval.TO];
     props.push({
       'data-storage': {
         column: column,
-        intervalIndex: fPaginatorUtils.FilterInterval.FROM,
+        intervalIndex: kupManager.FilterInterval.FROM,
         isInterval: true,
       },
       fullWidth: true,
@@ -7641,7 +7659,7 @@ class KupColumnMenu {
     props.push({
       'data-storage': {
         column: column,
-        intervalIndex: fPaginatorUtils.FilterInterval.TO,
+        intervalIndex: kupManager.FilterInterval.TO,
         isInterval: true,
       },
       fullWidth: true,
@@ -7670,12 +7688,12 @@ class KupColumnMenu {
       return props;
     }
     let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[fPaginatorUtils.FilterInterval.FROM];
-    let initialValueTo = interval[fPaginatorUtils.FilterInterval.TO];
+    let initialValueFrom = interval[kupManager.FilterInterval.FROM];
+    let initialValueTo = interval[kupManager.FilterInterval.TO];
     props.push({
       'data-storage': {
         column: column,
-        intervalIndex: fPaginatorUtils.FilterInterval.FROM,
+        intervalIndex: kupManager.FilterInterval.FROM,
         isInterval: true,
       },
       data: {
@@ -7693,7 +7711,7 @@ class KupColumnMenu {
     props.push({
       'data-storage': {
         column: column,
-        intervalIndex: fPaginatorUtils.FilterInterval.TO,
+        intervalIndex: kupManager.FilterInterval.TO,
         isInterval: true,
       },
       data: {
@@ -7726,8 +7744,8 @@ class KupColumnMenu {
       return props;
     }
     let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[fPaginatorUtils.FilterInterval.FROM];
-    let initialValueTo = interval[fPaginatorUtils.FilterInterval.TO];
+    let initialValueFrom = interval[kupManager.FilterInterval.FROM];
+    let initialValueTo = interval[kupManager.FilterInterval.TO];
     let suffixFrom = null;
     let suffixTo = null;
     if (dom.ketchup.objects.isTimestamp(column.obj)) {
@@ -7750,7 +7768,7 @@ class KupColumnMenu {
       'data-storage': {
         column: column,
         suffix: suffixFrom,
-        intervalIndex: fPaginatorUtils.FilterInterval.FROM,
+        intervalIndex: kupManager.FilterInterval.FROM,
         isInterval: true,
       },
       data: {
@@ -7768,7 +7786,7 @@ class KupColumnMenu {
       'data-storage': {
         column: column,
         suffix: suffixTo,
-        intervalIndex: fPaginatorUtils.FilterInterval.TO,
+        intervalIndex: kupManager.FilterInterval.TO,
         isInterval: true,
       },
       data: {
@@ -8033,7 +8051,7 @@ const KupDataTable = class {
     /**
      * The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'.
      */
-    this.density = fCell.FCellPadding.DENSE;
+    this.density = kupManager.FCellPadding.DENSE;
     /**
      * Enables drag.
      */
@@ -8519,7 +8537,7 @@ const KupDataTable = class {
     }
   }
   identifyAndInitRows() {
-    utils.identify(this.getRows());
+    kupManager.identify(this.getRows());
     this.expandGroupsHandler();
     this.resetSelectedRows();
   }
@@ -8584,7 +8602,7 @@ const KupDataTable = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, kupManager.KupDataTableProps, descriptions);
+    return kupManager.getProps(this, kupManager.KupDataTableProps, descriptions);
   }
   /**
    * This method will get the selected rows of the component.
@@ -8652,7 +8670,7 @@ const KupDataTable = class {
       });
     }
     this.columnMenuCard.setAttribute('data-column', column);
-    this.columnMenuCard.data = this.columnMenuInstance.prepData(this, cellUtils.getColumnByName(this.getVisibleColumns(), column));
+    this.columnMenuCard.data = this.columnMenuInstance.prepData(this, kupManager.getColumnByName(this.getVisibleColumns(), column));
     this.columnMenuInstance.open(this, column);
     this.columnMenuInstance.reposition(this, this.columnMenuCard);
     this.kupDataTableColumnMenu.emit({
@@ -8710,7 +8728,7 @@ const KupDataTable = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, kupManager.KupDataTableProps, props);
+    kupManager.setProps(this, kupManager.KupDataTableProps, props);
   }
   /**
    * This method will set the selected rows of the component.
@@ -9088,7 +9106,7 @@ const KupDataTable = class {
         }, null, {
           drop: (e) => {
             const draggedTh = e.relatedTarget;
-            const grouped = cellUtils.getColumnByName(this.getColumns(), draggedTh.dataset.column);
+            const grouped = kupManager.getColumnByName(this.getColumns(), draggedTh.dataset.column);
             this.handleColumnGroup(grouped);
             this.tableRef.removeAttribute(kupManager.kupDragActiveAttr);
           },
@@ -9103,7 +9121,7 @@ const KupDataTable = class {
         }, null, {
           drop: (e) => {
             const draggedTh = e.relatedTarget;
-            const deleted = cellUtils.getColumnByName(this.getColumns(), draggedTh.dataset.column);
+            const deleted = kupManager.getColumnByName(this.getColumns(), draggedTh.dataset.column);
             this.hideColumn(deleted);
             this.tableRef.removeAttribute(kupManager.kupDragActiveAttr);
           },
@@ -9117,7 +9135,7 @@ const KupDataTable = class {
         const draggable = e.target;
         return {
           cell: null,
-          column: cellUtils.getColumnByName(this.getVisibleColumns(), draggable.dataset.column),
+          column: kupManager.getColumnByName(this.getVisibleColumns(), draggable.dataset.column),
           id: this.rootElement.id,
           multiple: !!(this.selection === kupManager.SelectionMode.MULTIPLE ||
             this.selection === kupManager.SelectionMode.MULTIPLE_CHECKBOX),
@@ -9134,7 +9152,7 @@ const KupDataTable = class {
           !this.enableMergeColumns);
         const draggable = e.relatedTarget;
         const starter = draggable.kupDragDrop.column;
-        const receiving = cellUtils.getColumnByName(this.getColumns(), e.target.dataset.column);
+        const receiving = kupManager.getColumnByName(this.getColumns(), e.target.dataset.column);
         this.columnDropCardAnchor = e.target;
         if (receiving && starter) {
           if (onlySort) {
@@ -9185,7 +9203,7 @@ const KupDataTable = class {
     }
     if (this.resizableColumns) {
       const moveCb = (e) => {
-        const column = cellUtils.getColumnByName(this.getVisibleColumns(), e.target.dataset.column);
+        const column = kupManager.getColumnByName(this.getVisibleColumns(), e.target.dataset.column);
         column.size = e.rect.width + 'px';
         this.refresh();
       };
@@ -9216,7 +9234,7 @@ const KupDataTable = class {
           const cellEl = this.rootElement.shadowRoot.querySelector('td:hover');
           return {
             cell: cellEl['data-cell'],
-            column: cellUtils.getColumnByName(this.getVisibleColumns(), cellEl.dataset.column),
+            column: kupManager.getColumnByName(this.getVisibleColumns(), cellEl.dataset.column),
             id: this.rootElement.id,
             multiple: !!(this.selection === kupManager.SelectionMode.MULTIPLE ||
               this.selection === kupManager.SelectionMode.MULTIPLE_CHECKBOX),
@@ -9338,7 +9356,7 @@ const KupDataTable = class {
   setDynPosElements() {
     // Column menu
     if (this.columnMenuCard && this.columnMenuCard.data) {
-      this.columnMenuCard.data = this.columnMenuInstance.prepData(this, cellUtils.getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
+      this.columnMenuCard.data = this.columnMenuInstance.prepData(this, kupManager.getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
     }
   }
   //---- Lifecycle hooks ----
@@ -9363,7 +9381,7 @@ const KupDataTable = class {
     this.currentRowsPerPage = this.rowsPerPage;
     this.isRestoringState = false;
     //this.identifyAndInitRows();
-    utils.identify(this.getRows());
+    kupManager.identify(this.getRows());
     this.expandGroupsHandler();
     if (document.querySelectorAll('.header')[0]) {
       this.navBarHeight =
@@ -9693,7 +9711,7 @@ const KupDataTable = class {
           ? th.dataset.column
           : null;
       if (columnName) {
-        column = cellUtils.getColumnByName(this.getColumns(), columnName);
+        column = kupManager.getColumnByName(this.getColumns(), columnName);
       }
     }
     return {
@@ -10684,7 +10702,7 @@ const KupDataTable = class {
         }
       }
       else {
-        value = utils.numberToFormattedStringNumber(footerValue, column.decimals, column.obj ? column.obj.p : '');
+        value = kupManager.numberToFormattedStringNumber(footerValue, column.decimals, column.obj ? column.obj.p : '');
       }
       return (index.h("td", { "data-column": column.name, class: fixedCellStyle && fixedCellStyle.fixedCellClasses
           ? fixedCellStyle.fixedCellClasses
@@ -10763,7 +10781,7 @@ const KupDataTable = class {
               }
             }
             else {
-              value = utils.numberToFormattedStringNumber(totalValue, column.decimals, column.obj ? column.obj.p : '');
+              value = kupManager.numberToFormattedStringNumber(totalValue, column.decimals, column.obj ? column.obj.p : '');
             }
           }
           cells.push(index.h("td", { class: totalClass }, value));
@@ -10817,7 +10835,7 @@ const KupDataTable = class {
             ? selectionStyleAndClass.fixedCellClasses
             : null, style: selectionStyleAndClass
             ? selectionStyleAndClass.fixedCellStyle
-            : null }, index.h(fCell.FCheckbox, Object.assign({}, props))));
+            : null }, index.h(fCheckbox.FCheckbox, Object.assign({}, props))));
       }
       // Renders action cell
       // If active, this can be either the first or second cell
@@ -11146,10 +11164,10 @@ const KupDataTable = class {
       } })));
   }
   getDensityCodeFromDecode(decode) {
-    return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(fCell.FCellPadding));
+    return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(kupManager.FCellPadding));
   }
   renderDensityPanel() {
-    const listItems = this.createListData(Object.values(fCell.FCellPadding), this.DENSITY_ICONS, this.density);
+    const listItems = this.createListData(Object.values(kupManager.FCellPadding), this.DENSITY_ICONS, this.density);
     const listData = { data: listItems, showIcons: true };
     const textfieldData = {
       trailingIcon: true,
@@ -11271,20 +11289,21 @@ const KupDataTable = class {
     }
     let groupChips = null;
     if (this.isGrouping()) {
-      const chipsData = this.groups.map((group) => {
-        const column = cellUtils.getColumnByName(this.getColumns(), group.column);
+      const chipsData = [];
+      for (let index = 0; index < this.groups.length; index++) {
+        const group = this.groups[index];
+        const column = kupManager.getColumnByName(this.getColumns(), group.column);
         if (column) {
-          const a = {
+          chipsData.push({
             value: column.title,
             id: column.name,
             checked: true,
-          };
-          return a;
+          });
         }
         else {
-          return null;
+          this.kupManager.debug.logMessage(this, "Grouped for a non-existent column! (" + group.column + ")", kupManager.KupDebugCategory.WARNING);
         }
-      });
+      }
       if (chipsData.length > 0) {
         const props = {
           data: chipsData,
@@ -12021,7 +12040,7 @@ const KupDropdownButton = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupDropdownButtonProps, descriptions);
+    return kupManager.getProps(this, KupDropdownButtonProps, descriptions);
   }
   /**
    * Returns the component's internal value.
@@ -12040,7 +12059,7 @@ const KupDropdownButton = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupDropdownButtonProps, props);
+    kupManager.setProps(this, KupDropdownButtonProps, props);
   }
   /**
    * Sets the internal value of the component.
@@ -12151,6 +12170,7 @@ const KupDropdownButton = class {
         ? true
         : false,
       styling: this.styling ? this.styling : fButtonDeclarations.FButtonStyling.RAISED,
+      title: this.rootElement.title,
     };
     if (!this.dropdownOnly) {
       buttons.push(index.h(fButton.FButton, Object.assign({}, props, { icon: this.icon ? this.icon : null, label: this.label ? this.label : null, trailingIcon: this.trailingIcon ? true : false, wrapperClass: "dropdown-button__primary-action", onClick: () => this.onKupClick(), onBlur: () => this.onKupBlur(), onFocus: () => this.onKupFocus() })));
@@ -12733,7 +12753,7 @@ const KupGauge = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupGaugeProps, descriptions);
+    return kupManager.getProps(this, KupGaugeProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -12746,7 +12766,7 @@ const KupGauge = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupGaugeProps, props);
+    kupManager.setProps(this, KupGaugeProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -12949,7 +12969,7 @@ const KupGauge = class {
         let retValue = '';
         if (thresholdPercentage > 0 && thresholdPercentage < 1) {
           if (this.showLabels && !this.onlyValue) {
-            retValue = (index.h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, utils.unformattedStringToFormattedStringNumber(String(threshold), -1, '')));
+            retValue = (index.h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, kupManager.unformattedStringToFormattedStringNumber(String(threshold), -1, '')));
           }
         }
         else {
@@ -12962,7 +12982,7 @@ const KupGauge = class {
               topX = this.size - this.arcThickness;
               topY = halvedSize + this.labelDistance;
             }
-            retValue = (index.h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, utils.unformattedStringToFormattedStringNumber(String(threshold), -1, '')));
+            retValue = (index.h("text", { class: "gauge__label-text", "text-anchor": textPosition, x: topX, y: topY }, kupManager.unformattedStringToFormattedStringNumber(String(threshold), -1, '')));
           }
         }
         return retValue;
@@ -12971,7 +12991,7 @@ const KupGauge = class {
     const style = { fontSize: this.calculateValueFontSize() };
     let valueText = undefined;
     if (this.showValue) {
-      valueText = (index.h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, utils.unformattedStringToFormattedStringNumber(String(tempValue), -1, '') +
+      valueText = (index.h("text", { class: "gauge__label-text value", "text-anchor": "middle", x: halvedSize, y: valueLabelYPosition, style: style }, kupManager.unformattedStringToFormattedStringNumber(String(tempValue), -1, '') +
         ' ' +
         this.measurementUnit));
     }
@@ -13501,7 +13521,7 @@ const KupImage = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupImageProps, descriptions);
+    return kupManager.getProps(this, KupImageProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -13514,7 +13534,7 @@ const KupImage = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupImageProps, props);
+    kupManager.setProps(this, KupImageProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -13813,7 +13833,7 @@ const KupList = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupListProps, descriptions);
+    return kupManager.getProps(this, KupListProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -13836,7 +13856,7 @@ const KupList = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupListProps, props);
+    kupManager.setProps(this, KupListProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -14015,7 +14035,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
       display: 'none',
     };
     innerSpanTag = [
-      index.h("span", { class: "list-item__graphic" }, index.h("input", { type: "checkbox", style: trickForMDC }), index.h(fCell.FCheckbox, { checked: checkedAttr })),
+      index.h("span", { class: "list-item__graphic" }, index.h("input", { type: "checkbox", style: trickForMDC }), index.h(fCheckbox.FCheckbox, { checked: checkedAttr })),
       imageTag,
       index.h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index$1 }, primaryTextTag, secTextTag),
     ];
@@ -14155,7 +14175,7 @@ const KupProgressBar = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupProgressBarProps, descriptions);
+    return kupManager.getProps(this, KupProgressBarProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -14168,7 +14188,7 @@ const KupProgressBar = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupProgressBarProps, props);
+    kupManager.setProps(this, KupProgressBarProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -14388,7 +14408,7 @@ const KupRadio = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupRadioProps, descriptions);
+    return kupManager.getProps(this, KupRadioProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -14401,7 +14421,7 @@ const KupRadio = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupRadioProps, props);
+    kupManager.setProps(this, KupRadioProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -14533,7 +14553,7 @@ const KupRating = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupRatingProps, descriptions);
+    return kupManager.getProps(this, KupRatingProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -14546,7 +14566,7 @@ const KupRating = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupRatingProps, props);
+    kupManager.setProps(this, KupRatingProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -14687,7 +14707,7 @@ const KupSpinner = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupSpinnerProps, descriptions);
+    return kupManager.getProps(this, KupSpinnerProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -14700,7 +14720,7 @@ const KupSpinner = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupSpinnerProps, props);
+    kupManager.setProps(this, KupSpinnerProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -14834,20 +14854,6 @@ const KupSpinner = class {
 };
 KupSpinner.style = kupSpinnerCss;
 
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FSwitch = (props) => {
-  return (index.h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    index.h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
-      index.h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
-        index.h("div", { class: "switch__track" }),
-        index.h("div", { class: "switch__thumb-underlay" },
-          index.h("div", { class: "switch__thumb" },
-            index.h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))),
-      index.h("label", { onClick: props.onChange }, props.label))));
-};
-
 /**
  * Props of the kup-switch component.
  * Used to export every prop in an object.
@@ -14952,7 +14958,7 @@ const KupSwitch = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupSwitchProps, descriptions);
+    return kupManager.getProps(this, KupSwitchProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -14965,7 +14971,7 @@ const KupSwitch = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupSwitchProps, props);
+    kupManager.setProps(this, KupSwitchProps, props);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -15014,7 +15020,7 @@ const KupSwitch = class {
       onChange: () => this.onKupChange(),
       onFocus: () => this.onKupFocus(),
     };
-    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h(FSwitch, Object.assign({}, props)))));
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h(fCell.FSwitch, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -15129,7 +15135,7 @@ const KupTabBar = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupTabBarProps, descriptions);
+    return kupManager.getProps(this, KupTabBarProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -15142,7 +15148,7 @@ const KupTabBar = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupTabBarProps, props);
+    kupManager.setProps(this, KupTabBarProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -15228,6 +15234,7 @@ KupTabBar.style = kupTabBarCss;
 var KupTextFieldProps;
 (function (KupTextFieldProps) {
   KupTextFieldProps["customStyle"] = "Custom style of the component.";
+  KupTextFieldProps["decimals"] = "Number of decimals (should be used when inputType is number).";
   KupTextFieldProps["disabled"] = "When set to true, the component is disabled.";
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";
@@ -15240,7 +15247,10 @@ 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.";
@@ -15279,6 +15289,11 @@ const KupTextField = class {
      * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
     this.customStyle = '';
+    /**
+     * Number of decimals (should be used when inputType is number).
+     * @default null
+     */
+    this.decimals = null;
     /**
      * When set to true, the component is disabled.
      * @default false
@@ -15356,6 +15371,11 @@ const KupTextField = class {
      * @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
@@ -15468,7 +15488,7 @@ const KupTextField = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupTextFieldProps, descriptions);
+    return kupManager.getProps(this, KupTextFieldProps, descriptions);
   }
   /**
    * Returns the component's internal value.
@@ -15493,7 +15513,7 @@ const KupTextField = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupTextFieldProps, props);
+    kupManager.setProps(this, KupTextFieldProps, props);
   }
   /**
    * Sets the internal value of the component.
@@ -15540,6 +15560,7 @@ const KupTextField = class {
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
+      decimals: this.decimals,
       disabled: this.disabled,
       fullHeight: this.rootElement.classList.contains('kup-full-height')
         ? true
@@ -15559,6 +15580,7 @@ const KupTextField = class {
       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')
@@ -15675,12 +15697,6 @@ const KupTimePicker = class {
      * Instance of the KupManager class.
      */
     this.kupManager = 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;
@@ -15809,7 +15825,7 @@ const KupTimePicker = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, KupTimePickerProps, descriptions);
+    return kupManager.getProps(this, KupTimePickerProps, descriptions);
   }
   /**
    * Returns the component's internal value.
@@ -15836,7 +15852,7 @@ const KupTimePicker = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, KupTimePickerProps, props);
+    kupManager.setProps(this, KupTimePickerProps, props);
   }
   /**
    * Sets the internal value of the component.
@@ -15848,13 +15864,13 @@ const KupTimePicker = class {
   /*           P r i v a t e   M e t h o d s         */
   /*-------------------------------------------------*/
   getFormattedValue(value) {
-    return utils.formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
+    return kupManager.formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
       ? kupManager.KupDatesFormats.ISO_TIME
       : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, this.manageSeconds);
   }
   refreshPickerValue(eventDetailValue, eventToRaise) {
     let newValue = null;
-    if (utils.isValidFormattedStringTime(eventDetailValue, this.manageSeconds)) {
+    if (kupManager.isValidFormattedStringTime(eventDetailValue, this.manageSeconds)) {
       this.value = eventDetailValue;
       newValue = this.value;
     }
@@ -16004,8 +16020,8 @@ const KupTimePicker = class {
         date.getMinutes() == selectedTime.getMinutes()) {
         selected = true;
       }
-      const value = utils.formatTime(date, this.manageSeconds);
-      const id = utils.formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
+      const value = kupManager.formatTime(date, this.manageSeconds);
+      const id = kupManager.formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
         ? kupManager.KupDatesFormats.ISO_TIME
         : kupManager.KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, this.manageSeconds);
       let item = {
@@ -16022,7 +16038,7 @@ const KupTimePicker = class {
     if (this.value == null || this.value.trim() == '') {
       return '';
     }
-    let v1 = utils.unformattedStringToFormattedStringTime(this.value, this.manageSeconds);
+    let v1 = kupManager.unformattedStringToFormattedStringTime(this.value, this.manageSeconds);
     return v1;
   }
   /*-------------------------------------------------*/
@@ -16172,7 +16188,7 @@ class FiltersTreeItems extends fPaginatorUtils.FiltersRows {
         value: node.value,
       };
       if (node.visible) {
-        this.addColumnValueFromRow(values, column, cellsHolder[column.name]);
+        kupManager.addColumnValueFromRow(values, column, cellsHolder[column.name]);
         this.extractColumnValues(node.children, column, values);
       }
     });
@@ -16258,7 +16274,7 @@ const KupTree = class {
     /**
      * The density of the rows, defaults at 'medium' and can also be set to 'dense' or 'wide'.
      */
-    this.density = fCell.FCellPadding.MEDIUM;
+    this.density = kupManager.FCellPadding.MEDIUM;
     /**
      * Function that gets invoked when a new set of nodes must be loaded as children of a node.
      *
@@ -16304,7 +16320,7 @@ const KupTree = class {
     /**
      * The mode of the global filter (default SIMPLE)
      */
-    this.globalFilterMode = fPaginatorUtils.KupGlobalFilterMode.SIMPLE;
+    this.globalFilterMode = kupManager.KupGlobalFilterMode.SIMPLE;
     /**
      * Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells.
      * It works only on cells of the main column.
@@ -16373,7 +16389,6 @@ const KupTree = class {
      * Reference to the column menu card.
      */
     this.columnMenuCard = null;
-    this.selectedColumn = '';
     this.clickTimeout = [];
     this.sizedColumns = undefined;
     this.filtersColumnMenuInstance = new fPaginatorUtils.FiltersColumnMenu();
@@ -16389,7 +16404,6 @@ const KupTree = class {
     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;
@@ -16436,7 +16450,6 @@ const KupTree = class {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -16532,7 +16545,7 @@ const KupTree = class {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return utils.getProps(this, fPaginatorUtils.KupTreeProps, descriptions);
+    return kupManager.getProps(this, fPaginatorUtils.KupTreeProps, descriptions);
   }
   /**
    * Hides the given column.
@@ -16580,7 +16593,7 @@ const KupTree = class {
       });
     }
     this.columnMenuCard.setAttribute('data-column', column);
-    this.columnMenuCard.data = this.columnMenuInstance.prepData(this, cellUtils.getColumnByName(this.getVisibleColumns(), column));
+    this.columnMenuCard.data = this.columnMenuInstance.prepData(this, kupManager.getColumnByName(this.getVisibleColumns(), column));
     this.columnMenuInstance.open(this, column);
     this.columnMenuInstance.reposition(this, this.columnMenuCard);
     this.kupTreeColumnMenu.emit({
@@ -16611,7 +16624,7 @@ const KupTree = class {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    utils.setProps(this, fPaginatorUtils.KupTreeProps, props);
+    kupManager.setProps(this, fPaginatorUtils.KupTreeProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
@@ -16678,7 +16691,7 @@ const KupTree = class {
   setDynPosElements() {
     // Column menu
     if (this.columnMenuCard && this.columnMenuCard.data) {
-      this.columnMenuCard.data = this.columnMenuInstance.prepData(this, cellUtils.getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
+      this.columnMenuCard.data = this.columnMenuInstance.prepData(this, kupManager.getColumnByName(this.getVisibleColumns(), this.columnMenuAnchor), this.columnMenuCard.data);
     }
   }
   expandCollapseNode(treeNode, expandNode = false) {
@@ -16745,7 +16758,7 @@ const KupTree = class {
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(path) {
+  getEventDetails(path, e) {
     let isHeader, isBody, isFooter, td, th, tr, filterRemove;
     if (path) {
       for (let i = path.length - 1; i >= 0; i--) {
@@ -16803,7 +16816,7 @@ const KupTree = class {
           ? th.dataset.column
           : null;
       if (columnName) {
-        column = cellUtils.getColumnByName(this.getColumns(), columnName);
+        column = kupManager.getColumnByName(this.getColumns(), columnName);
       }
     }
     return {
@@ -16817,6 +16830,7 @@ const KupTree = class {
       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,
@@ -16825,7 +16839,7 @@ const KupTree = class {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(this.getEventPath(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);
@@ -16859,6 +16873,12 @@ const KupTree = class {
       fPaginatorUtils.KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === fPaginatorUtils.KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
+      const td = e
+        ? this.getEventPath(e.target).find((el) => {
+          if (el.tagName === 'TD')
+            return el;
+        })
+        : null;
       // If this TreeNode is not disabled, then it can be selected and an event is emitted
       if (treeNodeData && !treeNodeData.disabled) {
         if (this.autoSelectionNodeMode)
@@ -16872,11 +16892,10 @@ const KupTree = class {
             .split(',')
             .map((treeNodeIndex) => parseInt(treeNodeIndex)),
           treeNode: treeNodeData,
-          columnName: this.selectedColumn,
+          columnName: td ? td.dataset.column : null,
           auto: auto,
         });
       }
-      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === fPaginatorUtils.KupTreeExpansionMode.NODE) {
@@ -17211,13 +17230,20 @@ const KupTree = class {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = () => {
-        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath, false), 300));
+      treeNodeOptions['onClick'] = (e) => {
+        // Note: event must be cloned
+        // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+        const clone = {};
+        for (const key in e) {
+          clone[key] = e[key];
+        }
+        this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath, false), 300));
       };
     }
     // When a tree node is displayed as a table
     let treeNodeCells = null;
     let visibleCols = this.getVisibleColumns();
+    !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     if (this.showColumns && visibleCols && visibleCols.length) {
       treeNodeCells = [];
       // Renders all the cells
@@ -17258,7 +17284,7 @@ const KupTree = class {
     let treeNodeCell = null;
     if (this.isTreeColumnVisible()) {
       let content = '';
-      if (fPaginatorUtils.KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
+      if (kupManager.KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
         content = this.renderHighlightedContent(treeNodeData.value, this.globalFilterValue, 'cell-content');
       }
       else {
@@ -17404,7 +17430,7 @@ const KupTree = class {
         value = this.footer[column.name];
       }
       else {
-        value = utils.numberToFormattedStringNumber(this.footer[column.name], column.decimals, column.obj ? column.obj.p : '');
+        value = kupManager.numberToFormattedStringNumber(this.footer[column.name], column.decimals, column.obj ? column.obj.p : '');
       }
       return (index.h("td", { "data-column": column.name }, totalMenu, index.h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
     });
@@ -17560,6 +17586,12 @@ const KupTree = class {
         }
       }
     }
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        fTextFieldMdc.FTextFieldMDC(fs[index]);
+      }
+    }
     if (this.preventXScroll) {
       this.setEllipsis();
     }
@@ -17577,10 +17609,10 @@ const KupTree = class {
     this.sizedColumns = this.getSizedColumns();
     let wrapperClass = 'density-medium';
     switch (this.density) {
-      case fCell.FCellPadding.DENSE:
+      case kupManager.FCellPadding.DENSE:
         wrapperClass = 'density-dense';
         break;
-      case fCell.FCellPadding.WIDE:
+      case kupManager.FCellPadding.WIDE:
         wrapperClass = 'density-wide';
         break;
     }