@sme.up/ketchup 10.3.1 → 10.3.2

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         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_elStyle, _KupAutocomplete_listEl, _KupAutocomplete_kupManager, _KupAutocomplete_textfieldWrapper, _KupAutocomplete_textfieldEl, _KupAutocomplete_clickCb, _KupAutocomplete_inputTimeout, _KupAutocomplete_openList, _KupAutocomplete_closeList, _KupAutocomplete_isListOpened, _KupAutocomplete_consistencyCheck, _KupAutocomplete_prepList, _KupAutocomplete_calcSize;
+var _KupAutocomplete_instances, _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 { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { FTextField } from "../../f-components/f-text-field/f-text-field";
@@ -27,6 +27,8 @@ import { KupThemeIconValues } from "../../managers/kup-theme/kup-theme-declarati
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupDynamicPositionPlacement } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
+import { getSizeOfInputElement } from "../../utils/cell-utils";
+import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
 export class KupAutocomplete {
     constructor() {
         _KupAutocomplete_instances.add(this);
@@ -68,8 +70,9 @@ export class KupAutocomplete {
         this.showMarker = false;
         this.sizing = KupComponentSizing.SMALL;
         this.trailingIcon = false;
-        this.placeholder = 'Type code or description';
+        this.placeholder = null;
         this.legacyLook = false;
+        this.size = undefined;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_isListOpened).call(this)) {
@@ -168,6 +171,19 @@ export class KupAutocomplete {
             node: e.detail.selected,
         });
     }
+    onKupClearIconClick() {
+        this.value = '';
+        this.displayedValue = '';
+        __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value = '';
+        this.kupChange.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: this.value,
+            inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+            node: { value: '' },
+        });
+        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_closeList).call(this);
+    }
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
@@ -290,6 +306,7 @@ export class KupAutocomplete {
                 'kup-text-field': {},
             };
         }
+        this.placeholder || (this.placeholder = __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").language.translate(KupLanguageGeneric.TYPE_CODE_OR_DESCR));
     }
     componentDidLoad() {
         __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, this.initialValueDecode, true);
@@ -311,6 +328,7 @@ export class KupAutocomplete {
         __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").debug.logRender(this, true);
     }
     render() {
+        var _a;
         const props = {
             alert: this.alert,
             danger: this.rootElement.classList.contains('kup-danger')
@@ -336,17 +354,18 @@ export class KupAutocomplete {
                 ? true
                 : false,
             showMarker: this.showMarker,
-            size: __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_calcSize).call(this),
             legacyLook: this.legacyLook,
+            size: getSizeOfInputElement(this.data, this.displayMode, this.size),
+            title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: '3f6a66ca4b883e9632b7350f3d85b4f9cdeea29e', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: '3fecd938e95c108cd84b312f1d88afd0b90d2782' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '62b0977226e9b5cd0f3e25001797997c9f3ceafa', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: 'adf742e46d43da776fae42c4a9b42bc989c5bcda' }, props, { icon: this.showDropDownIcon
+        return (h(Host, { key: '93b9a4c6870519581ca37bf96fbeaa12d8e6d31a', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h("style", { key: 'f441e0889173a7152678b0e09b4ab236d3262888' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '72c71c7890ec8574916f9a7f9ef977036776ce01', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h(FTextField, Object.assign({ key: '8db16287e57a8b2d025326913945e89092a2b0c7' }, props, { icon: this.showDropDownIcon
                 ? KupThemeIconValues.SEARCH
                 : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
                 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)));
+            }, onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
     }
     disconnectedCallback() {
         if (__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f")) {
@@ -889,13 +908,13 @@ export class KupAutocomplete {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "\"Type code or description\""
+                            "text": "'Type code or description'"
                         }],
-                    "text": "Set custom placeholder / watermark for text field"
+                    "text": "Set custom placeholder / watermark for text field, if not set the default one will be taken on component load."
                 },
                 "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "'Type code or description'"
+                "defaultValue": "null"
             },
             "legacyLook": {
                 "type": "boolean",
@@ -917,6 +936,23 @@ export class KupAutocomplete {
                 "attribute": "legacy-look",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the size of the input element"
+                },
+                "attribute": "size",
+                "reflect": false
             }
         };
     }
@@ -1333,24 +1369,4 @@ _KupAutocomplete_elStyle = new WeakMap(), _KupAutocomplete_listEl = new WeakMap(
     }
 }, _KupAutocomplete_prepList = function _KupAutocomplete_prepList() {
     return (h("kup-list", Object.assign({ displayMode: this.listDisplayMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (__classPrivateFieldSet(this, _KupAutocomplete_listEl, el, "f")) })));
-}, _KupAutocomplete_calcSize = function _KupAutocomplete_calcSize() {
-    var _a, _b;
-    // Explicitly setting size from sub-components props, if present
-    if ((_a = this.data['kup-text-field']) === null || _a === void 0 ? void 0 : _a.size) {
-        return (_b = this.data['kup-text-field']) === null || _b === void 0 ? void 0 : _b.size;
-    }
-    else {
-        switch (this.displayMode) {
-            case ItemsDisplayMode.CODE:
-                return 15;
-            case ItemsDisplayMode.DESCRIPTION:
-                return 35;
-            case ItemsDisplayMode.CODE_AND_DESC:
-            case ItemsDisplayMode.CODE_AND_DESC_ALIAS:
-            case ItemsDisplayMode.DESC_AND_CODE:
-                return 50;
-            default:
-                return 35;
-        }
-    }
 };

package/dist/collection/components/kup-calendar/kup-calendar.css

@@ -350,6 +350,19 @@
   .calendar .fc-view-harness {
     min-height: 450px;
   }
+  .fc-event {
+    display: flex;
+    flex-direction: column;
+    padding: 0.2rem;
+    gap: var(--kup-space-03);
+  }
+  .fc-event .fc-event-main {
+    display: flex;
+    flex-direction: column;
+  }
+  .fc-event .fc-daygrid-event-dot {
+    display: none;
+  }
   .navigation .navigation__left {
     font-size: 20px;
     gap: 8px;

package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js

@@ -143,7 +143,7 @@ async function applyFormula(component) {
             ? parts[1].trim()
             : valueString;
         if (premadeFormulas.includes(value)) {
-            dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
+            const result = dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
                 columns: [
                     options.receivingColumn.name,
                     options.starterColumn.name,
@@ -154,7 +154,7 @@ async function applyFormula(component) {
                 operation: value,
             });
             if (options.formulaCb !== undefined) {
-                options.formulaCb();
+                options.formulaCb(result);
             }
         }
         else {
@@ -170,7 +170,7 @@ async function applyFormula(component) {
                 combobox.refresh();
             }
             else if (options.formulaCb !== undefined) {
-                options.formulaCb();
+                options.formulaCb(result);
             }
         }
     }

package/dist/collection/components/kup-card/kup-card-helper.js

@@ -7,11 +7,12 @@ import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarat
  * This function returns a list of components.
  * @param {GenericObject[]} compArray - Components' props.
  * @param {string} compType - Components' type.
+ * @param {number} maxLength - Maximum number of components to return.
  * @returns {JSX.Element[]} List of components.
  */
-export function compList(compArray, compType) {
+export function compList(compArray, compType, maxLength = compArray.length) {
     let list = [];
-    for (let index = 0; index < compArray.length; index++) {
+    for (let index = 0; index < Math.min(maxLength, compArray.length); index++) {
         if (typeof compArray[0] !== 'string' &&
             !compArray[index].id) {
             compArray[index]['id'] = compType + index;

package/dist/collection/components/kup-card/kup-card.css

@@ -3128,6 +3128,14 @@
   margin-left: 0;
   margin-right: auto;
 }
+.standard-layout-12 .sub-filters-warning {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--kup-space-05);
+}
+.standard-layout-12 .sub-filters-warning label {
+  font-size: var(--kup-label-01-font-size, 12px);
+}
 
 .standard-layout-13 {
   background-color: var(--kup-background-color);
@@ -3303,6 +3311,14 @@
   margin-left: 0;
   margin-right: auto;
 }
+.standard-layout-14 .sub-filters-warning {
+  display: flex;
+  justify-content: center;
+  padding-top: var(--kup-space-05);
+}
+.standard-layout-14 .sub-filters-warning label {
+  font-size: var(--kup-label-01-font-size, 12px);
+}
 .standard-layout-14 .sub-formula {
   padding: 0.5em 0;
 }

package/dist/collection/components/kup-card/standard/kup-card-standard.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { FImage } from "../../../f-components/f-image/f-image";
 import { compList } from "../kup-card-helper";
 import { KupLanguageColumn, KupLanguageGeneric, KupLanguageSearch, } from "../../../managers/kup-language/kup-language-declarations";
@@ -7,7 +7,9 @@ import { KupCardCSSClasses, KupCardIds } from "../kup-card-declarations";
 import { KupColumnMenuIds } from "../../../utils/kup-column-menu/kup-column-menu-declarations";
 import { KupThemeColorValues } from "../../../managers/kup-theme/kup-theme-declarations";
 import { FButtonStyling } from "../../../f-components/f-button/f-button-declarations";
+import { kupManagerInstance } from "../../../managers/kup-manager/kup-manager";
 const dom = document.documentElement;
+const kupManager = kupManagerInstance();
 /**
  * 1st standard card layout, inspired by Material Design.
  * @param {KupCard} component - Card component.
@@ -370,6 +372,7 @@ export function create12(component) {
             buttonsIds.push(button['id']);
         }
     }
+    const filtersMaxLen = kupManager.perfTuning.data.filtersMaxLength;
     return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ||
         buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ||
         buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("div", { class: "section-1" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_GROUP)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_ADD_COLUMNS)))) : null)) : null, h("div", { class: `section-2 ${textfieldArray.length > 0 ||
@@ -382,7 +385,7 @@ export function create12(component) {
         ? compList(textfieldArray, 'textfield')
         : null, timepickerArray.length > 0
         ? compList(timepickerArray, 'timepicker')
-        : null), checkboxArray.length > 0 ? (h("div", { class: "section-3" }, compList(checkboxArray, 'checkbox'))) : null));
+        : null), checkboxArray.length > 0 ? (h(Fragment, null, getFiltersWarningElement(checkboxArray, filtersMaxLen), h("div", { class: "section-3" }, compList(checkboxArray, 'checkbox', filtersMaxLen)))) : null));
 }
 /**
  * 13th standard card layout, buttons and text lines, used for debug window.
@@ -491,6 +494,7 @@ export function create14(component) {
         }
     }
     const tooltipText = dom.ketchup.language.translate(KupLanguageSearch.TOOLTIP);
+    const filtersMaxLen = kupManager.perfTuning.data.filtersMaxLength;
     return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, objectArray[0] ? (h("div", { class: "section-1" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))), h("div", { class: "sub-1" }, textArray[0] ||
         buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
         buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "top" }, textArray[0] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
@@ -510,7 +514,7 @@ export function create14(component) {
         ? compList(textfieldArray, 'textfield')
         : null, timepickerArray.length > 0
         ? compList(timepickerArray, 'timepicker')
-        : null), checkboxArray.length > 0 ? (h("div", { class: "sub-checkbox" }, compList(checkboxArray, 'checkbox'))) : null)) : null, tabsValues.includes(KupLanguageColumn.COLUMNS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
+        : null), checkboxArray.length > 0 ? (h(Fragment, null, getFiltersWarningElement(checkboxArray, filtersMaxLen), h("div", { class: "sub-checkbox" }, compList(checkboxArray, 'checkbox', filtersMaxLen)))) : null)) : null, tabsValues.includes(KupLanguageColumn.COLUMNS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
             ? KupCardCSSClasses.VISIBLE
             : ''}` }, h("div", { class: "sub-button" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
         KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
@@ -650,3 +654,6 @@ export function create17(component) {
         return h("kup-list", Object.assign({}, b));
     }))) : null)));
 }
+function getFiltersWarningElement(checkboxArray, filtersMaxLength) {
+    return checkboxArray.length > filtersMaxLength ? (h("div", { class: 'sub-filters-warning' }, h("label", null, kupManager.language.translate(KupLanguageGeneric.PARTIAL_FILTERS_LIST)))) : null;
+}

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

@@ -196,13 +196,15 @@ export class KupChip {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h(Host, { key: 'bf8bf0a53796849610faed0eb1424a10db852338', "onKup-autocomplete-itemclick": (e) => {
+        return (h(Host, { key: 'd8cfebdb07ba8edd6dc3537932d0bc0af691f35b', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-textfield-change": (e) => {
                 __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h("style", { key: '66132a3e1baf71ff1703cc2a5760f83afc41841f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '09690424ee34a1ec12e8a4f1a368fb6b1f3da1db', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: '74a0bb6b61c03cf41f46091ccef2efd8eabdc48a', name: "field" }))));
+            }, "onKup-textfield-submit": (e) => {
+                __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+            } }, h("style", { key: '752eb1a7d0ac346204c4c1cf05c02a7d4d95fd7d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '70df2afbe8e3a484cb6894607fe6e951bf60679d', id: componentWrapperId }, this.label ? (h("div", { class: "mdc-text-field__label-container" }, h("label", { class: "mdc-label" }, this.label))) : null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { key: 'f3c578d5f21090cd839b4048e4a5996d96c36eb0', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -692,7 +694,5 @@ _KupChip_instances = new WeakSet(), _KupChip_changeHandler =
         stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
     });
 }, _KupChip_stringifiedValues = function _KupChip_stringifiedValues() {
-    let stringifiedValues = '';
-    this.data.forEach((node) => (stringifiedValues += node.id + ';'));
-    return stringifiedValues;
+    return this.data.map((node) => node.id).join(';');
 };

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

@@ -18,4 +18,5 @@ export var KupComboboxProps;
     KupComboboxProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
     KupComboboxProps["showMarker"] = "When true shows a small marker on the component";
     KupComboboxProps["legacyLook"] = "When true enables the monospaced look for the CMB component";
+    KupComboboxProps["size"] = "Sets the size of the input element";
 })(KupComboboxProps || (KupComboboxProps = {}));

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

@@ -27,6 +27,7 @@ import { KupThemeIconValues } from "../../managers/kup-theme/kup-theme-declarati
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupDynamicPositionPlacement } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
+import { getSizeOfInputElement } from "../../utils/cell-utils";
 export class KupCombobox {
     constructor() {
         _KupCombobox_instances.add(this);
@@ -63,6 +64,7 @@ export class KupCombobox {
         this.trailingIcon = false;
         this.showMarker = false;
         this.legacyLook = false;
+        this.size = undefined;
     }
     onKupBlur() {
         if (!__classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_isListOpened).call(this)) {
@@ -139,6 +141,19 @@ export class KupCombobox {
             inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
         });
     }
+    onKupClearIconClick() {
+        this.value = '';
+        this.displayedValue = '';
+        __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value = '';
+        this.kupChange.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: this.value,
+            inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
+            node: { value: '' },
+        });
+        __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_closeList).call(this);
+    }
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
@@ -282,6 +297,7 @@ export class KupCombobox {
         __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").debug.logRender(this, true);
     }
     render() {
+        var _a;
         const props = {
             alert: this.alert,
             danger: this.rootElement.classList.contains('kup-danger')
@@ -308,12 +324,14 @@ export class KupCombobox {
                 : false,
             showMarker: this.showMarker,
             legacyLook: this.legacyLook,
+            size: getSizeOfInputElement(this.data, this.displayMode, this.size),
+            title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: 'd724bfd8c4b33e0756be8a9669d218e7a3f15dd9', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: '2115e4d44f5d28d72de809e98818e81e14f955b3' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd907dc96d2dbf1c680ce181f868be5daea0f6f1f', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: 'b305bb5e3f2408217ff82abf854d82a3caca5886' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h(Host, { key: '3a668e909d00508d820581ceb71cec02bf640fa6', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: '8fe26ceec376d17b2fb81825d9e7c3ed9839d8a4' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '56d4ec7e7dc9ec8d95082d7f0f53830c0cd66170', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '61a0a16cb31b1dcdb5d91d5ebe4be550c81a93f2' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
-                : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), 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, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
     disconnectedCallback() {
         if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f")) {
@@ -779,6 +797,23 @@ export class KupCombobox {
                 "attribute": "legacy-look",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the size of the input element"
+                },
+                "attribute": "size",
+                "reflect": false
             }
         };
     }