@sme.up/ketchup 6.0.0 → 6.2.0

package/dist/collection/components/kup-autocomplete/kup-autocomplete.js

@@ -1,3 +1,15 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _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;
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
@@ -11,6 +23,7 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupAutocomplete {
   constructor() {
+    _KupAutocomplete_instances.add(this);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
@@ -78,34 +91,35 @@ export class KupAutocomplete {
     /*-------------------------------------------------*/
     /*       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(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupChange(value) {
-    this.doConsistencyCheck = true;
-    const ret = this.consistencyCheck(undefined, value);
+    __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    const ret = __classPrivateFieldGet(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(this, _KupAutocomplete_textfieldEl, "f").value,
       });
     }
   }
@@ -114,7 +128,7 @@ export class KupAutocomplete {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   onKupFocus() {
@@ -122,82 +136,78 @@ export class KupAutocomplete {
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet(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(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
+    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+    if (__classPrivateFieldGet(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(this, _KupAutocomplete_textfieldEl, "f").value,
       });
     }
   }
   onKupIconClick() {
-    if (this.textfieldWrapper.classList.contains('toggled')) {
-      this.closeList();
+    if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled')) {
+      __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
     }
     else {
-      this.openList(true);
+      __classPrivateFieldGet(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(this, _KupAutocomplete_textfieldEl, "f").value,
+      open: __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").classList.contains('toggled'),
     });
   }
   onKupItemClick(e) {
     this.onKupChange(e.detail.selected.id);
-    this.closeList();
-    if (this.textfieldEl) {
-      this.textfieldEl.focus();
+    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f")) {
+      __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").focus();
     }
     this.kupItemClick.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
-      inputValue: this.textfieldEl.value,
+      inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
     });
   }
   /*-------------------------------------------------*/
   /*                L i s t e n e r s                */
   /*-------------------------------------------------*/
   listenKeydown(e) {
-    if (this.isListOpened()) {
+    if (__classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.focusNext();
+          __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.focusPrevious();
+          __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          this.listEl.select().then(() => {
-            this.closeList();
-            this.textfieldEl.focus();
+          __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").select().then(() => {
+            __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+            __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").focus();
           });
           break;
         case 'Escape':
           e.preventDefault();
           e.stopPropagation();
-          this.closeList();
+          __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
           break;
       }
     }
@@ -206,14 +216,14 @@ export class KupAutocomplete {
         case 'ArrowDown':
           e.preventDefault();
           e.stopPropagation();
-          this.openList(false);
-          this.listEl.focusNext();
+          __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").focusNext();
           break;
         case 'ArrowUp':
           e.preventDefault();
           e.stopPropagation();
-          this.openList(false);
-          this.listEl.focusPrevious();
+          __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
+          __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").focusPrevious();
           break;
       }
     }
@@ -246,7 +256,7 @@ export class KupAutocomplete {
    * Sets the focus to the component.
    */
   async setFocus() {
-    this.textfieldEl.focus();
+    __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").focus();
   }
   /**
    * Sets the props to the component.
@@ -260,81 +270,16 @@ export class KupAutocomplete {
    * @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(this, _KupAutocomplete_doConsistencyCheck, true, "f");
+    __classPrivateFieldGet(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(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.register(this);
+    __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
     this.value = this.initialValue;
     if (!this.data) {
       this.data = {
@@ -344,43 +289,44 @@ export class KupAutocomplete {
     }
   }
   componentDidLoad() {
-    this.consistencyCheck(undefined, this.value);
-    this.kupManager.debug.logLoad(this, true);
+    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, true);
+    __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
+    __classPrivateFieldGet(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(this, _KupAutocomplete_textfieldWrapper, f, "f");
+        __classPrivateFieldSet(this, _KupAutocomplete_textfieldEl, f.querySelector('input'), "f");
         FTextFieldMDC(f);
       }
     }
-    this.kupManager.debug.logRender(this, true);
+    __classPrivateFieldGet(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 },
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") },
+      h("style", null, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId, style: __classPrivateFieldGet(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(this, _KupAutocomplete_inputTimeout, "f"));
+            __classPrivateFieldSet(this, _KupAutocomplete_inputTimeout, window.setTimeout(() => this.onKupInput(), this.inputDelay), "f");
+          }, onIconClick: () => this.onKupIconClick() }))),
+      __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
   }
   disconnectedCallback() {
-    if (this.listEl) {
-      this.kupManager.dynamicPosition.unregister([this.listEl]);
-      this.listEl.remove();
+    if (__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f")) {
+      __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.unregister([__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f")]);
+      __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").remove();
     }
-    this.kupManager.theme.unregister(this);
+    __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.unregister(this);
   }
   static get is() { return "kup-autocomplete"; }
   static get encapsulation() { return "shadow"; }
@@ -931,3 +877,63 @@ export class KupAutocomplete {
       "passive": false
     }]; }
 }
+_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(this, _KupAutocomplete_textfieldEl, "f").value.length < this.minimumChars) {
+    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    return false;
+  }
+  __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").classList.add('toggled');
+  __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible = true;
+  const elStyle = __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").style;
+  elStyle.height = 'auto';
+  elStyle.minWidth = __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").clientWidth + 'px';
+  if (__classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.isRegistered(__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"))) {
+    __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.changeAnchor(__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f"));
+  }
+  else {
+    __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.register(__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"), __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f"), 0, KupDynamicPositionPlacement.AUTO, true);
+  }
+  __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.start(__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"));
+  if (!__classPrivateFieldGet(this, _KupAutocomplete_clickCb, "f")) {
+    __classPrivateFieldSet(this, _KupAutocomplete_clickCb, {
+      cb: () => {
+        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+      },
+      el: __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"),
+    }, "f");
+  }
+  __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").addClickCallback(__classPrivateFieldGet(this, _KupAutocomplete_clickCb, "f"), true);
+  return true;
+}, _KupAutocomplete_closeList = function _KupAutocomplete_closeList() {
+  __classPrivateFieldGet(this, _KupAutocomplete_textfieldWrapper, "f").classList.remove('toggled');
+  __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible = false;
+  __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").dynamicPosition.stop(__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f"));
+  __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupAutocomplete_clickCb, "f"));
+}, _KupAutocomplete_isListOpened = function _KupAutocomplete_isListOpened() {
+  return __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").menuVisible == true;
+}, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, setValue) {
+  if (!__classPrivateFieldGet(this, _KupAutocomplete_doConsistencyCheck, "f")) {
+    return;
+  }
+  __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, false, "f");
+  const ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(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(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").filter = ret.value;
+    }
+  }
+  else {
+    this.displayedValue = idIn;
+    if (__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
+      __classPrivateFieldGet(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(this, _KupAutocomplete_listEl, el, "f")) })));
+};

package/dist/collection/components/kup-box/kup-box.js

@@ -17,6 +17,7 @@ import { FCell } from '../../f-components/f-cell/f-cell';
 import { FPaginator } from '../../f-components/f-paginator/f-paginator';
 import { FPaginatorMode } from '../../f-components/f-paginator/f-paginator-declarations';
 import { pageChange, rowsPerPageChange, } from '../../f-components/f-paginator/f-paginator-utils';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -939,7 +940,9 @@ export class KupBox {
     if (!this.kanban.columns || this.kanban.columns.length === 0) {
       this.kupManager.debug.logMessage(this, 'No columns to group by detected.', KupDebugCategory.ERROR);
       return {
-        jsx: (h("p", { id: "empty-data-message" }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
+        jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" },
+          h("div", { ref: (el) => this.rowsRefs.push(el) }),
+          this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
         style: { 'grid-template-columns': `repeat(1, 1fr)` },
       };
     }
@@ -1154,6 +1157,13 @@ export class KupBox {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     this.checkScrollOnHover();
     this.persistState();
     this.didRenderInteractables();
@@ -1205,7 +1215,8 @@ export class KupBox {
     let boxContent = null;
     let containerStyle = {};
     if (this.rows.length === 0) {
-      boxContent = (h("p", { id: "empty-data-message" }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+      boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" },
+        h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
       containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
     }
     else if (isKanban) {

package/dist/collection/components/kup-button/kup-button.js

@@ -202,6 +202,7 @@ export class KupButton {
         : false,
       styling: this.styling,
       showSpinner: this.showSpinner,
+      title: this.rootElement.title,
       toggable: this.toggable,
       trailingIcon: this.trailingIcon,
       warning: this.rootElement.classList.contains('kup-warning')

package/dist/collection/components/kup-combobox/kup-combobox.js

@@ -88,7 +88,7 @@ export class KupCombobox {
     });
   }
   onKupChange(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
@@ -121,14 +121,14 @@ export class KupCombobox {
     });
   }
   onKupInput() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
     });
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
   }
   onKupIconClick() {
     if (__classPrivateFieldGet(this, _KupCombobox_textfieldWrapper, "f").classList.contains('toggled')) {
@@ -254,7 +254,7 @@ export class KupCombobox {
    * @param {string} value - Value to be set.
    */
   async setValue(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -271,7 +271,7 @@ export class KupCombobox {
     }
   }
   componentDidLoad() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, undefined, this.value, true);
+    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
     __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -297,7 +297,8 @@ export class KupCombobox {
       h("div", { id: componentWrapperId, style: __classPrivateFieldGet(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(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(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
   }
   disconnectedCallback() {
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f")) {
@@ -808,20 +809,22 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
   __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
   return __classPrivateFieldGet(this, _KupCombobox_listEl, "f").menuVisible == true;
-}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(e, idIn, setValue) {
-  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(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(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
+  if (ret.exists) {
+    if (setValue) {
+      this.value = ret.value;
+      this.displayedValue = ret.displayedValue;
+    }
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = this.displayedValue;
+      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   else {
     this.value = idIn;
     this.displayedValue = idIn;
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = idIn;
+      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = ret.value;
     }
   }
   return ret;

package/dist/collection/components/kup-dashboard/kup-dashboard-declarations.js

@@ -0,0 +1,10 @@
+/**
+ * Props of the kup-dashboard component.
+ * Used to export every prop in an object.
+ */
+export var KupDashboardProps;
+(function (KupDashboardProps) {
+  KupDashboardProps["customStyle"] = "Custom style of the component.";
+  KupDashboardProps["data"] = "The data of the component.";
+  KupDashboardProps["enableDesign"] = "When set to true, the component is in design mode and it is draggable.";
+})(KupDashboardProps || (KupDashboardProps = {}));

package/dist/collection/components/{kup-form-editor/kup-form-editor.css → kup-dashboard/kup-dashboard.css}

@@ -3,6 +3,10 @@
   height: 100%;
 }
 
+#kup-component {
+  height: 100%;
+}
+
 .header {
   display: flex;
   flex-direction: row;
@@ -14,17 +18,19 @@
 
 .form {
   display: grid;
-  grid-gap: 0.5em;
+  height: 100%;
 }
 
 .form-dropzone {
   padding: 1em;
+  grid-gap: 0.5em;
   border: 1px solid var(--kup-primary-color);
 }
 
 .section {
   display: flex;
   flex-direction: column;
+  overflow: auto;
 }
 
 .section-header {
@@ -51,7 +57,6 @@
 
 .section-dropzone {
   border: 1px solid var(--kup-primary-color);
-  min-height: 100px;
 }
 
 .section-draggable {
@@ -65,10 +70,6 @@
   margin: 0.5em;
 }
 
-.component-draggable {
-  border: 1px solid var(--kup-secondary-color);
-}
-
 .layout-row {
   grid-auto-flow: column;
   grid-template-columns: min-content;