@sme.up/ketchup 6.0.0 → 6.2.0

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

@@ -1,17 +1,18 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement$1, a as getAssetPath } from './index-baeab1ac.js';
-import { k as kupManagerInstance, K as KupDynamicPositionPlacement, a as KupThemeIconValues, b as KupThemeColorValues, c as KupDebugCategory, d as KupDatesFormats, e as KupCardBuiltInClockElements, f as KupCardCSSClasses, g as KupLanguageTotals, h as KupLanguageGeneric, i as KupLanguageColumn, j as KupDataNewColumnTypes, l as KupCardSubEvents, m as KupCardIds, n as KupLanguageRow, o as KupCardFamily, p as KupCardProps, q as KupDates, r as KupDatesNormalize, s as KupObjects, G as GroupLabelDisplayMode, S as SelectionMode, t as KupLanguageGrouping, u as KupLanguageCheckbox, v as KupLanguageSearch, L as LoadMoreMode, P as PaginatorPos, w as ShowGrid, T as TotalMode, x as TotalLabel, y as KupPointerEventTypes, z as kupDraggableColumnAttr, A as kupDragActiveAttr, B as KupDragEffect, C as kupDraggableCellAttr, D as KupDropEventTypes, E as iconColumn, F as keyColumn, H as fieldColumn, I as FixedCellsCSSVarsBase, J as SortMode, M as KupLanguageFontsize, N as KupLanguageDensity, O as KupLanguageGrid, Q as kupDynamicPositionAttribute, R as KupDataTableProps, U as FixedCellsClasses } from './kup-manager-58b075b4.js';
-import { F as FTextField } from './f-text-field-d6c61c73.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement$1, a as getAssetPath } from './index-ad6ab214.js';
+import { k as kupManagerInstance, K as KupThemeIconValues, a as KupDynamicPositionPlacement, b as KupThemeColorValues, c as KupDebugCategory, d as KupDatesFormats, e as KupCardBuiltInClockElements, f as KupCardCSSClasses, g as KupLanguageTotals, h as KupLanguageGeneric, i as KupLanguageColumn, j as KupDataNewColumnTypes, l as KupCardSubEvents, m as KupCardIds, n as KupLanguageRow, o as KupCardFamily, p as KupCardProps, q as KupDates, r as KupDatesNormalize, s as KupObjects, G as GroupLabelDisplayMode, S as SelectionMode, t as KupLanguageGrouping, u as KupLanguageCheckbox, v as KupLanguageSearch, F as FCellPadding, L as LoadMoreMode, P as PaginatorPos, w as ShowGrid, T as TotalMode, x as TotalLabel, y as KupPointerEventTypes, z as kupDraggableColumnAttr, A as kupDragActiveAttr, B as KupDragEffect, C as kupDraggableCellAttr, D as KupDropEventTypes, E as iconColumn, H as keyColumn, I as fieldColumn, J as FixedCellsCSSVarsBase, M as SortMode, N as KupLanguageFontsize, O as KupLanguageDensity, Q as KupLanguageGrid, R as kupDynamicPositionAttribute, U as KupDataTableProps, V as FixedCellsClasses } from './kup-manager-22a475e6.js';
+import { F as FTextField } from './f-text-field-41c575eb.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-d42d3f9e.js';
-import { g as getProps, s as setProps, a as getMonthsAsStringByLocale, D as DateTimeFormatOptionsMonth, i as identify, n as numberToFormattedStringNumber, u as unformattedStringToFormattedStringNumber, f as formattedStringToCustomUnformattedStringTime, b as isValidFormattedStringTime, c as formatTime, d as unformattedStringToFormattedStringTime } from './utils-d7e4b3c2.js';
+import { g as getProps, s as setProps, a as getMonthsAsStringByLocale, D as DateTimeFormatOptionsMonth, i as identify, n as numberToFormattedStringNumber, u as unformattedStringToFormattedStringNumber, f as formattedStringToCustomUnformattedStringTime, b as isValidFormattedStringTime, c as formatTime, d as unformattedStringToFormattedStringTime } from './utils-2c1f4122.js';
 import { c as componentWrapperId } from './GenericVariables-665de00a.js';
-import { F as FImage } from './f-image-c468d8ae.js';
-import { F as FButton } from './f-button-871a544b.js';
+import { F as FImage } from './f-image-2ab4b9aa.js';
+import { F as FButton } from './f-button-fd44ef70.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FChipType, a as FChip } from './f-chip-1dda722f.js';
+import { F as FChipType, a as FChip } from './f-chip-c2e4c522.js';
 import { M as MDCRipple } from './component-b1bedf1d.js';
-import { g as getColumnByName, f as formatToNumber, a as getValueForDisplay2, b as getValueForDisplay } from './cell-utils-964da6b5.js';
-import { F as FCheckbox, a as FCellPadding, b as FCell } from './f-cell-521ef17a.js';
-import { F as FiltersColumnMenu, a as FiltersRows, b as Filters, c as FilterInterval, d as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, g as groupRows, s as sortRows, e as FPaginator, h as pageChange, r as rowsPerPageChange, t as treeMainColumnName, K as KupTreeExpansionMode, i as KupGlobalFilterMode, j as KupTreeProps } from './f-paginator-utils-7dff8ff0.js';
+import { g as getColumnByName, f as formatToNumber, a as getValueForDisplay2, b as getValueForDisplay } from './cell-utils-cb5d4149.js';
+import { F as FCheckbox } from './f-checkbox-c51c4a75.js';
+import { F as FiltersColumnMenu, a as FiltersRows, b as Filters, c as FilterInterval, d as calcTotals, n as normalizeRows, p as paginateRows, f as filterRows, g as groupRows, s as sortRows, e as FPaginator, h as pageChange, r as rowsPerPageChange, t as treeMainColumnName, K as KupTreeExpansionMode, i as KupGlobalFilterMode, j as KupTreeProps } from './f-paginator-utils-ef537d82.js';
+import { F as FCell, a as FSwitch } from './f-cell-7b159a22.js';
 import './tslib.es6-3eea2234.js';
 
 /**
@@ -104,15 +105,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,
@@ -192,6 +199,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) {
     registerInstance(this, hostRef);
@@ -202,6 +226,7 @@ const KupAutocomplete = class {
     this.kupInput = createEvent(this, "kup-autocomplete-input", 6);
     this.kupIconClick = createEvent(this, "kup-autocomplete-iconclick", 6);
     this.kupItemClick = createEvent(this, "kup-autocomplete-itemclick", 6);
+    _KupAutocomplete_instances.add(this);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
@@ -269,34 +294,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 = kupManagerInstance();
-    this.textfieldWrapper = undefined;
-    this.textfieldEl = undefined;
-    this.clickCb = null;
+    _KupAutocomplete_kupManager.set(this, 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,
       });
     }
   }
@@ -305,7 +331,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() {
@@ -313,82 +339,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;
       }
     }
@@ -397,14 +419,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;
       }
     }
@@ -437,7 +459,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.
@@ -451,81 +473,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, 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 (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 = {
@@ -535,43 +492,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(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 (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: this.elStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: this.elStyle }, h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, h("style", null, __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
         ? 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 getElement$1(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, 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 (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;
 
 /**
@@ -907,6 +924,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')
@@ -6930,7 +6948,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,
@@ -6963,14 +6981,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')) {
@@ -7096,7 +7114,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          */
@@ -7113,7 +7131,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() {
@@ -7136,7 +7154,7 @@ const KupCombobox = class {
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
     return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$1(this, _KupCombobox_elStyle, "f") }, h("style", null, __classPrivateFieldGet$1(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: __classPrivateFieldGet$1(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
         ? 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")) {
@@ -7183,20 +7201,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;
@@ -11267,20 +11287,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 = 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 + ")", KupDebugCategory.WARNING);
         }
-      });
+      }
       if (chipsData.length > 0) {
         const props = {
           data: chipsData,
@@ -12147,6 +12168,7 @@ const KupDropdownButton = class {
         ? true
         : false,
       styling: this.styling ? this.styling : FButtonStyling.RAISED,
+      title: this.rootElement.title,
     };
     if (!this.dropdownOnly) {
       buttons.push(h(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() })));
@@ -14830,20 +14852,6 @@ const KupSpinner = class {
 };
 KupSpinner.style = kupSpinnerCss;
 
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FSwitch = (props) => {
-  return (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 }),
-    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
-      h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
-        h("div", { class: "switch__track" }),
-        h("div", { class: "switch__thumb-underlay" },
-          h("div", { class: "switch__thumb" },
-            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 })))),
-      h("label", { onClick: props.onChange }, props.label))));
-};
-
 /**
  * Props of the kup-switch component.
  * Used to export every prop in an object.
@@ -15236,7 +15244,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.";
@@ -15352,6 +15363,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
@@ -15555,6 +15571,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')
@@ -15671,12 +15688,6 @@ const KupTimePicker = class {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.hoursEl = undefined;
-    this.minutesEl = undefined;
-    this.secondsEl = undefined;
-    this.hoursCircleEl = undefined;
-    this.minutesCircleEl = undefined;
-    this.secondsCircleEl = undefined;
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
@@ -16384,7 +16395,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;
@@ -16431,7 +16441,6 @@ const KupTree = class {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -16740,7 +16749,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--) {
@@ -16812,6 +16821,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,
@@ -16820,7 +16830,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);
@@ -17567,6 +17577,12 @@ const KupTree = class {
         }
       }
     }
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     if (this.preventXScroll) {
       this.setEllipsis();
     }