@sme.up/ketchup 6.0.0 → 6.2.0

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

@@ -2,20 +2,21 @@
 
 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-06b131ea.js');
+const kupManager = require('./kup-manager-02acbb37.js');
+const fTextField = require('./f-text-field-9ee20a67.js');
 const fTextFieldMdc = require('./f-text-field-mdc-85997738.js');
-const utils = require('./utils-6287d878.js');
+const utils = require('./utils-4b208b48.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-2a61ece2.js');
+const fButton = require('./f-button-5b69d882.js');
 const fButtonDeclarations = require('./f-button-declarations-b611587f.js');
-const fChip = require('./f-chip-b00897d7.js');
+const fChip = require('./f-chip-02e83f82.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 cellUtils = require('./cell-utils-fe64a28c.js');
+const fCheckbox = require('./f-checkbox-57443ca3.js');
+const fPaginatorUtils = require('./f-paginator-utils-09126bdd.js');
+const fCell = require('./f-cell-3a740c48.js');
 require('./tslib.es6-0ee02c67.js');
 
 /**
@@ -108,15 +109,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 +203,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 +230,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 +298,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 +335,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 +343,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 +423,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;
       }
     }
@@ -441,7 +463,7 @@ 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.
@@ -455,81 +477,16 @@ const KupAutocomplete = class {
    * @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 +496,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;
 
 /**
@@ -911,6 +928,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')
@@ -6314,7 +6332,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);
@@ -6934,7 +6952,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 +6985,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')) {
@@ -7100,7 +7118,7 @@ const KupCombobox = class {
    * @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 +7135,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 +7158,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 +7205,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;
@@ -8033,7 +8053,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.
      */
@@ -10817,7 +10837,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 +11166,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 +11291,21 @@ const KupDataTable = class {
     }
     let groupChips = null;
     if (this.isGrouping()) {
-      const chipsData = this.groups.map((group) => {
+      const chipsData = [];
+      for (let index = 0; index < this.groups.length; index++) {
+        const group = this.groups[index];
         const column = cellUtils.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,
@@ -12151,6 +12172,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() })));
@@ -14015,7 +14037,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),
     ];
@@ -14834,20 +14856,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.
@@ -15014,7 +15022,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);
@@ -15240,7 +15248,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.";
@@ -15356,6 +15367,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
@@ -15559,6 +15575,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 +15692,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;
@@ -16258,7 +16269,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.
      *
@@ -16388,7 +16399,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;
@@ -16435,7 +16445,6 @@ const KupTree = class {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -16744,7 +16753,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--) {
@@ -16816,6 +16825,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,
@@ -16824,7 +16834,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);
@@ -17571,6 +17581,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();
     }
@@ -17588,10 +17604,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;
     }