@sme.up/ketchup 11.0.0-SNAPSHOT-20241217120821 → 11.0.0-SNAPSHOT-20241217144747

package/dist/components/{p-074b0557.js → p-d797e199.js}

@@ -4089,6 +4089,7 @@ var KupAutocompleteProps;
     KupAutocompleteProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
     KupAutocompleteProps["displayMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\".";
     KupAutocompleteProps["initialValue"] = "Sets the initial value of the component.";
+    KupAutocompleteProps["initialValueDecode"] = "Sets the initial value decode of the component";
     KupAutocompleteProps["inputDelay"] = "Input event emission delay in milliseconds.";
     KupAutocompleteProps["minimumChars"] = "The minimum number of chars to trigger the autocomplete.";
     KupAutocompleteProps["selectMode"] = "Sets how to return the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\".";
@@ -4140,7 +4141,9 @@ function getIdOfItemByDisplayMode(item, mode, separator) {
         return item.value;
     }
     if (mode == ItemsDisplayMode.DESCRIPTION_AND_CODE) {
-        return item.id + separator + item.value;
+        if (item.id || item.value) {
+            return item.id + separator + item.value;
+        }
     }
     return item.id;
 }
@@ -5345,7 +5348,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     var _a, _b, _c, _d;
     switch (cellType) {
         case FCellTypes.AUTOCOMPLETE:
-            return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
+            return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.CHECKBOX:
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
@@ -5364,7 +5367,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
         case FCellTypes.COLOR_PICKER:
             return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.COMBOBOX:
-            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
+            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.DATE:
             return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onKup-datepicker-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.MULTI_AUTOCOMPLETE:
@@ -10466,6 +10469,7 @@ var KupComboboxProps;
     KupComboboxProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
     KupComboboxProps["displayMode"] = "Sets how to show the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"Both\".";
     KupComboboxProps["initialValue"] = "Sets the initial value of the component";
+    KupComboboxProps["initialValueDecode"] = "Sets the initial value decode of the component";
     KupComboboxProps["isClearable"] = "Enables a clear trailing icon.";
     KupComboboxProps["isSelect"] = "Lets the combobox behave as a select element.";
     KupComboboxProps["selectMode"] = "Sets how to return the selected item value. Suported values: \"CodeOnly\", \"DescOnly\", \"both\".";
@@ -16452,7 +16456,7 @@ const KupTimePicker = /*@__PURE__*/ proxyCustomElement(class KupTimePicker exten
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h$1(Host, { key: '01279d87213d53b67cd6bd48830ce8b3d6ba2d0c' }, h$1("style", { key: 'e72d86ef452904cfc610fd4ee964715820b6a489' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '0ddf26e97241a003a77f0a041ef09621899fe952', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
+        return (h$1(Host, { key: 'c70c26c8423ee5dca2d3ad9affcbb2765ef4ba8c' }, h$1("style", { key: 'c8c0e4000a3497a0c781133275df16e88374cc72' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '53e37cf102a6a19bfb6b824f220379a6a31c98a8', id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);
@@ -18031,7 +18035,7 @@ const KupSwitch = /*@__PURE__*/ proxyCustomElement(class KupSwitch extends H {
             onChange: () => this.onKupChange(),
             onFocus: () => this.onKupFocus(),
         };
-        return (h$1(Host, { key: '86748c6c08475f936169898ba4b926718fcaf408' }, h$1("style", { key: '448695a70cd694897d210cd42a790f9141b9acdf' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '66676ec9881f2b6af0e0dc01f7a8614164e269c5', id: componentWrapperId }, h$1(FSwitch, Object.assign({ key: 'bceef796e14a6c35595cfc259c262438426cd57b' }, props)))));
+        return (h$1(Host, { key: '6fbe5e23fdd6002b4401a4f48789dcc3d67376d2' }, h$1("style", { key: '6dc6d4934ded345eb0d832d37387ddf29439d577' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '0738abd02342b1d6e4eee28c80b50cba91b62f49', id: componentWrapperId }, h$1(FSwitch, Object.assign({ key: '6774227df33c638e694a84ce48c2b0f47f81828b' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18294,59 +18298,59 @@ const KupSpinner = /*@__PURE__*/ proxyCustomElement(class KupSpinner extends H {
             spinnerClass = 'spinner-v' + this.layout;
             if (this.layout === 7) {
                 spinnerEl = [
-                    h$1("div", { key: '96692932f35b65738b7bd4a709f29a6882eb5d35', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '92a10a4176fc8117c7855edb5672ca51d6a82f05', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: 'eb18cdd80e2fdd87f2b41a28078695b5c7d106cc', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: '04555672d9cc1f0c373d8042e11f9846a74f9323', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: 'c5931a2cfb81583080d45d48a366ecc5ea64c051', class: "sk-spinner-v7-dot" }),
-                    h$1("div", { key: 'e25127c741adbd5143cc64876cf7676d2c820e9a', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '4bd11aebdfbc1c960633424069e51409e062feb4', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '1da54d48b55cf3f07994a52a3fdf9de32639b269', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '8001b4676b15ef60e84a4a728e457ab5afad7324', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: 'c0632f0be9eafee154b4c280915da15df6121fce', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '7756968cd19464597be513baee05bc32e684e16b', class: "sk-spinner-v7-dot" }),
+                    h$1("div", { key: '0d9bbdff5a1ecb62dab141ef19bdb934f9f2ab9b', class: "sk-spinner-v7-dot" }),
                 ];
             }
             if (this.layout === 9) {
                 spinnerEl = [
-                    h$1("div", { key: 'e25a5e3a3e0c6558ff69aaa9f26415d0f174b5b0', class: "sk-spinner-v9-bounce1" }),
-                    h$1("div", { key: 'd965dfd0f30bceae4071f59ddd6a93413e66c0d8', class: "sk-spinner-v9-bounce2" }),
+                    h$1("div", { key: '5959b3fc9c7d388a321ae6b4ec4b5fafc807ec9b', class: "sk-spinner-v9-bounce1" }),
+                    h$1("div", { key: 'bd31de963b3e2f580426ff611c1a7ab25d621329', class: "sk-spinner-v9-bounce2" }),
                 ];
             }
             if (this.layout === 10) {
                 spinnerEl = [
-                    h$1("div", { key: 'dc77ac1838734ab3d7fa10e37157c007a2f7a0f7', class: "sk-spinner-v10-cube1" }),
-                    h$1("div", { key: 'e079e592180df575002a539d3538fc7a8a603a73', class: "sk-spinner-v10-cube2" }),
+                    h$1("div", { key: '02ae86e55572f5923c03c8eb1383f07806624b80', class: "sk-spinner-v10-cube1" }),
+                    h$1("div", { key: 'd89e91a227d5d9cddcb565dac4e2a79d98e2a2bd', class: "sk-spinner-v10-cube2" }),
                 ];
             }
             if (this.layout === 12) {
                 spinnerEl = [
-                    h$1("div", { key: '1f7e9f41f12e05898777647b5317e3121f3d0b84', class: "sk-spinner-v12-dot1" }),
-                    h$1("div", { key: '761ea5842b5ccc7f5289612931f4aea9c3cb1719', class: "sk-spinner-v12-dot2" }),
+                    h$1("div", { key: '5731581e4a11b79e60eaa3e732b64ea004bcd5e1', class: "sk-spinner-v12-dot1" }),
+                    h$1("div", { key: '25d700729222f7c7c2af968fc6a06c3f47bfbd0c', class: "sk-spinner-v12-dot2" }),
                 ];
             }
             if (this.layout === 13) {
                 spinnerEl = [
-                    h$1("div", { key: 'a8ecdb239803689d32d5d751f749748246f2749d', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
-                    h$1("div", { key: 'ae4ffec0c0d2ec6cf04dee3ba30e4e53a9193296', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
-                    h$1("div", { key: 'e743362b2b34e79185fba06d2c62b0bfc0f2d81b', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
-                    h$1("div", { key: '007a0e740f489013c5413ed583bb9c97b9ebf6d0', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
-                    h$1("div", { key: '44c66240725e7ee2bd36517cc28efcaf65b8011c', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
-                    h$1("div", { key: '66f19c1fddcf50a3ee379ad87cdc526be514092f', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
-                    h$1("div", { key: '817c7ab107d0990d50e2605b8183ceb66ceee73f', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
-                    h$1("div", { key: '313b9525eb797803de6959ece1136ce04477dca5', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
-                    h$1("div", { key: 'ec75231b93337852eb67d052b3f6463bad26ffa6', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
+                    h$1("div", { key: 'd8c2c65aa3fa08b8137d41aec4f9aa42b4c7abce', class: "sk-spinner-v13-cube sk-spinner-v13-cube1" }),
+                    h$1("div", { key: '1294a53b8f3f710282060ccdd9f9325d50f8c668', class: "sk-spinner-v13-cube sk-spinner-v13-cube2" }),
+                    h$1("div", { key: 'b85842b20c55a113be6a523404d648bfb99ab609', class: "sk-spinner-v13-cube sk-spinner-v13-cube3" }),
+                    h$1("div", { key: '92f644e732fee84c97703f692fbf9f879120d503', class: "sk-spinner-v13-cube sk-spinner-v13-cube4" }),
+                    h$1("div", { key: '2baeb03d493ae21e23db5176a05480e0493269e4', class: "sk-spinner-v13-cube sk-spinner-v13-cube5" }),
+                    h$1("div", { key: '7164ee3bcb56a2b948ca13c008e6c31e2936a4d4', class: "sk-spinner-v13-cube sk-spinner-v13-cube6" }),
+                    h$1("div", { key: '13bc822dce6f147442e22b02730e21865b2c211c', class: "sk-spinner-v13-cube sk-spinner-v13-cube7" }),
+                    h$1("div", { key: '9169c182ea3ead483d9a1afe22bed8674c2fbd06', class: "sk-spinner-v13-cube sk-spinner-v13-cube8" }),
+                    h$1("div", { key: 'eff5a7428127574bb3aadbcadbdd94025c66f060', class: "sk-spinner-v13-cube sk-spinner-v13-cube9" }),
                 ];
             }
             if (this.layout === 14) {
                 spinnerEl = [
-                    h$1("div", { key: 'ac985dc9f68b8f8ccf18fea4421141304bf96cfc', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '68380b6cf9cc7922538a298efcbe25cdd6a2689c', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '3ccf00fa9e7243276d7b1200eda6252c1e8fb40e', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
-                    h$1("div", { key: 'f13bb429a3b6bb253ea723e10acbb5115310e8a9', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '811a9b344cc9e988e2320fc9859d541039d9df43', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '2d8b2366a1ac095d8d89e3d2f67a5e0db6b94a2b', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '1b29647d383fe51676bc160f8fa90f7f2e7e7859', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '9ee69337ef8957e3dcffd7d5721fb8d779479328', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
-                    h$1("div", { key: 'be9d0bccfecfe654d1268c3e1e5fa36073ab40f1', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '3e8bfe54448bb20691b1f3381f46388087e4a77a', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '62203f80263c73871d5465948f937e8dabc07618', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
-                    h$1("div", { key: '04aaf9514b8c47ae0a8b15e71943be087d82f90b', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'e6d6debfb615e9f33cff1f016acf7ee0c8d70498', class: "sk-spinner-v14-circle1 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '85fc5c6980792889e675c3df356feb3f3ec2d018', class: "sk-spinner-v14-circle2 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '7135a4ccd777f3cbb8deda8dfea569589851526f', class: "sk-spinner-v14-circle3 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'fc7ecbc8884464ad05219a38186aaa0ce5b12c87', class: "sk-spinner-v14-circle4 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '88fe8dfa73e2ac65cf6ef6b90c60971f2014112e', class: "sk-spinner-v14-circle5 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '1628c0a6ceb994ccd665ceeddecc69714ca43685', class: "sk-spinner-v14-circle6 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '631b7191885b196677d3df7f59a33f59813cb961', class: "sk-spinner-v14-circle7 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '0bd52f9f8b2dc98cdc92b4d68249ef9a2f72de7c', class: "sk-spinner-v14-circle8 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'b4859b29bc9c67fb31ac52baca133b568b7b5920', class: "sk-spinner-v14-circle9 sk-spinner-v14-circle" }),
+                    h$1("div", { key: 'd5923c97bc43352682dfc3bee8fe195e1a9f7697', class: "sk-spinner-v14-circle10 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '43a932bf52251603c9b99163c66f75c64abdcf72', class: "sk-spinner-v14-circle11 sk-spinner-v14-circle" }),
+                    h$1("div", { key: '1b3601b17f45e5548a7b47a0249bdf2f94c40b11', class: "sk-spinner-v14-circle12 sk-spinner-v14-circle" }),
                 ];
             }
         }
@@ -18365,7 +18369,7 @@ const KupSpinner = /*@__PURE__*/ proxyCustomElement(class KupSpinner extends H {
         else {
             elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
         }
-        return (h$1(Host, { key: 'e89031aff0515422bf313b6d75816eee1a1be8a4', style: elStyle }, h$1("style", { key: 'fe09930f27d2358ab85476ee06d741f61f89edea' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd502afd351c3123d93cba23b657d0cad315f590c', id: componentWrapperId, style: elStyle }, h$1("div", { key: '938900ed60ce21b69ae1467d3ea58bc486d3d6b8', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h$1("div", { key: 'ea0359893f1f02255c0a1988b9b6422302703dc4', id: wrapperClass, style: elStyle }, h$1("div", { key: '53ff614e48e01507541b55f0419e307bea923259', class: spinnerClass }, spinnerEl))))));
+        return (h$1(Host, { key: 'cd7f98fa14d07b314791e64aafa46f7111c2d9b9', style: elStyle }, h$1("style", { key: 'ccc425aadf72e68b26052ea5e402a1e809e87c51' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '3a3721606b23c6dd1a0ea67d46a7cc19ff7f2b87', id: componentWrapperId, style: elStyle }, h$1("div", { key: '671f408c10faa4279d9b8f974c7350a5c0adc2b4', id: "loading-wrapper-master", class: masterClass, style: elStyle }, h$1("div", { key: 'cc415dd3e870b000c3da0e5485b6a0a8e76ab224', id: wrapperClass, style: elStyle }, h$1("div", { key: 'efbebeff75c03843ce6ccf96f485aae5761c35e4', class: spinnerClass }, spinnerEl))))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18624,7 +18628,7 @@ const KupRating = /*@__PURE__*/ proxyCustomElement(class KupRating extends H {
                 : false,
             onClick: (i) => this.onKupClick(i),
         };
-        return (h$1(Host, { key: 'cca9b24675200d359bf91a620de8044f2bef1426' }, h$1("style", { key: '986e67ed44bb5e3d84f248d1a7d4c9525e73b779' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b5582f26cec08e9991cff8633b0727160ece08b5', id: componentWrapperId }, h$1(FRating, Object.assign({ key: '6605be5d010ed846971bc7e23439e1898ccf75eb' }, props)))));
+        return (h$1(Host, { key: '3d73b7606c40063f487a597a80ffcb020192bd26' }, h$1("style", { key: '1d93d5b324cbe85e685fcc6ea72d97598cc0ae2b' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '8061260a3bf3b35f3942cd8b029077f0fd24242b', id: componentWrapperId }, h$1(FRating, Object.assign({ key: '5bcad80eb8799b8ebc797cc4bb6a2b21c7355806' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18888,7 +18892,7 @@ const KupProgressBar = /*@__PURE__*/ proxyCustomElement(class KupProgressBar ext
                 ? true
                 : false,
         };
-        return (h$1(Host, { key: '0dda1afcc6c894a63f2090d372ec33c64f68e9cc' }, h$1("style", { key: '9b3c973b4c08e663688092e583f590f5ff9a021e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'bf829abd6a8ec69b05951b7b3c9a5a7c67d8554f', id: componentWrapperId }, h$1(FProgressBar, Object.assign({ key: 'dec34d14458ea7d07442f17f2217ce3943d92c3b' }, props)))));
+        return (h$1(Host, { key: 'fc069fc045b472feef52fb5992ba6192d499b837' }, h$1("style", { key: '2056a42b2210cea537df60dad6c7e9368e57e124' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'ef6a639f4dc3a94c5353ceca5dedb7f4cd3ea60e', id: componentWrapperId }, h$1(FProgressBar, Object.assign({ key: 'e25e24df64a29f9bc18814505da2bd0e0908a1d0' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -21112,7 +21116,7 @@ const KupDialog = /*@__PURE__*/ proxyCustomElement(class KupDialog extends H {
         if (headerSlot) {
             __classPrivateFieldSet$3(this, _KupDialog_header, headerSlot, "f");
         }
-        return (h$1(Host, { key: '677afdac900b1d07b1a2874869f3d8415a508f31', "fade-in": true, style: style }, h$1("style", { key: '22e733f191cd089e832746c87ad41e831e0af07f' }, __classPrivateFieldGet$4(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: 'b2a99bc3c9dec0ae5774b62423882d4e98d9a22b', id: componentWrapperId }, this.header ? (h$1("div", { class: "header", ref: (el) => (__classPrivateFieldSet$3(this, _KupDialog_header, el, "f")) }, this.header.title ? (h$1("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (h$1(FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : headerSlot ? (h$1("slot", { name: "header" })) : null, h$1("div", { key: 'c069c53fe1a71fdf84984ea725cfeb5876485686', class: "content" }, h$1("slot", { key: '1682932aeb2e0352bcf6d6f3685ea1b7f0be30b7', name: "content" })))));
+        return (h$1(Host, { key: 'f1ddf60b563705289df8bcac7b67fd9a4ed7b2e4', "fade-in": true, style: style }, h$1("style", { key: 'daafa62322845d8913844c00a5a148f856bbb327' }, __classPrivateFieldGet$4(this, _KupDialog_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '6408c03e635a80657661b7c19bac8f43809df0d2', id: componentWrapperId }, this.header ? (h$1("div", { class: "header", ref: (el) => (__classPrivateFieldSet$3(this, _KupDialog_header, el, "f")) }, this.header.title ? (h$1("div", { class: "header__title" }, this.header.title)) : null, ((_a = this.header.icons) === null || _a === void 0 ? void 0 : _a.close) ? (h$1(FImage, { onClick: () => this.close(), sizeX: "1.25em", sizeY: "100%", resource: "clear", wrapperClass: "header__close" })) : null)) : headerSlot ? (h$1("slot", { name: "header" })) : null, h$1("div", { key: '24026dd774bbe8efba75cf25df64dabb8aff0c1a', class: "content" }, h$1("slot", { key: '052be700dbf2257b204da95524bab4f7c95acfbe', name: "content" })))));
     }
     disconnectedCallback() {
         if (this.modal) {
@@ -21670,7 +21674,7 @@ const KupDatePicker = /*@__PURE__*/ proxyCustomElement(class KupDatePicker exten
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h$1(Host, { key: '46a53a55ec511a4beb0105b6a1caf5af95addc05' }, h$1("style", { key: '6b93ff258cacb4dfa701edcafb123f18b8b3a7f1' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd9685f29bf32e9222f62c708250e846b84c182a1', id: componentWrapperId }, this.prepTextfield(this.getDateForOutput()))));
+        return (h$1(Host, { key: '4e30c74703bcd1eb4d6deeb130e9744639b186d7' }, h$1("style", { key: '0dc7ca2e29337272a3a551a1320d180e59a0df7d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'f2f4304d4d815bec1fbb077d45c0a831907e99ab', id: componentWrapperId }, this.prepTextfield(this.getDateForOutput()))));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);
@@ -22289,7 +22293,7 @@ const KupForm = /*@__PURE__*/ proxyCustomElement(class KupForm extends H {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h$1("p", { key: '3c206215642b1662964c975671c3a2f7720eb470' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h$1("p", { key: '4b4c768ddde3a3e5b716aa6c78f19d124fe472ff' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -22300,7 +22304,7 @@ const KupForm = /*@__PURE__*/ proxyCustomElement(class KupForm extends H {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h$1(Host, { key: 'bc740600eab0fde6bce214eb57ce0a883a70bc50' }, h$1("style", { key: '73cf8c044cbe93249f7943e42b657b5d70247531' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '2fe3feca10d6237f4135453b91334527ba2ca311', id: componentWrapperId }, formContent)));
+        return (h$1(Host, { key: 'fef68da43868f5b70c76102cc08fc53557b0feb8' }, h$1("style", { key: 'c8265a9f9c5a9bce97c8c2bbf64d3d7cbf1f57ee' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'de6c69d454396ebf0e82b5de27c7541132038eeb', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);
@@ -26817,6 +26821,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         this.error = '';
         this.icon = null;
         this.initialValue = '';
+        this.initialValueDecode = '';
         this.isClearable = false;
         this.isSelect = true;
         this.label = null;
@@ -26837,7 +26842,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         });
     }
     onKupChange(value) {
-        let ret = __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+        let ret = __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, undefined, true);
         this.kupChange.emit({
             comp: this,
             id: this.rootElement.id,
@@ -26886,7 +26891,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         });
     }
     onKupInput() {
-        let ret = __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet$2(this, _KupCombobox_textfieldEl, "f").value, false);
+        let ret = __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet$2(this, _KupCombobox_textfieldEl, "f").value, undefined, false);
         __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
         this.kupInput.emit({
             comp: this,
@@ -26929,7 +26934,11 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
     initialValueChange(newValue) {
-        this.setValue(newValue);
+        this.initialValueDecode = undefined;
+        this.setValue(newValue, undefined);
+    }
+    initialValueDecodeChange(newValue) {
+        this.setValue(this.initialValue, newValue);
     }
     /*-------------------------------------------------*/
     /*                L i s t e n e r s                */
@@ -27020,8 +27029,8 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
      * Sets the component's value.
      * @param {string} value - Value to be set.
      */
-    async setValue(value) {
-        __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+    async setValue(value, valueDecode) {
+        __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, valueDecode, true);
     }
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
@@ -27038,7 +27047,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         }
     }
     componentDidLoad() {
-        __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, true);
+        __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, this.value, this.initialValueDecode, true);
         __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").debug.logLoad(this, true);
     }
     componentWillRender() {
@@ -27085,7 +27094,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'e3e6427593007de03f17946e49e422a8c00b2f3b', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: 'ec02f526acd19b1871becd562d0c08dc7632f5b6' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '71fa4c233462c65e683f4966d666b13970563522', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '8d7f6d777ad6947174423cad01ae8ad4f5cc2f71' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h$1(Host, { key: '4288932134731d8923bfabfe12b699a8cd2da762', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1("style", { key: 'a21e8ac16f00c02d50290582842d09c59ed6fbf5' }, __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: 'd3de05f1906daf13beeac3453257382df7a20740', id: componentWrapperId, style: __classPrivateFieldGet$2(this, _KupCombobox_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '6128749591c290c78e51afc59313d4db69394873' }, 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.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$2(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }
@@ -27098,7 +27107,8 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
     }
     get rootElement() { return this; }
     static get watchers() { return {
-        "initialValue": ["initialValueChange"]
+        "initialValue": ["initialValueChange"],
+        "initialValueDecode": ["initialValueDecodeChange"]
     }; }
     static get style() { return KupComboboxStyle0; }
 }, [1, "kup-combobox", {
@@ -27110,6 +27120,7 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         "error": [1],
         "icon": [1],
         "initialValue": [1, "initial-value"],
+        "initialValueDecode": [1, "initial-value-decode"],
         "isClearable": [4, "is-clearable"],
         "isSelect": [516, "is-select"],
         "label": [1],
@@ -27129,7 +27140,8 @@ const KupCombobox = /*@__PURE__*/ proxyCustomElement(class KupCombobox extends H
         "setProps": [64],
         "setValue": [64]
     }, [[0, "keydown", "listenKeydown"]], {
-        "initialValue": ["initialValueChange"]
+        "initialValue": ["initialValueChange"],
+        "initialValueDecode": ["initialValueDecodeChange"]
     }]);
 _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _KupCombobox_listEl = new WeakMap(), _KupCombobox_textfieldWrapper = new WeakMap(), _KupCombobox_textfieldEl = new WeakMap(), _KupCombobox_clickCb = new WeakMap(), _KupCombobox_instances = new WeakSet(), _KupCombobox_openList = function _KupCombobox_openList() {
     var _a, _b;
@@ -27169,7 +27181,7 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     __classPrivateFieldGet$2(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet$2(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
     return __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f").menuVisible == true;
-}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, setValue) {
+}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(idIn, idInDecode, setValue) {
     let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode);
     if (ret.exists) {
         if (setValue) {
@@ -27182,7 +27194,12 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     }
     else {
         this.value = idIn;
-        this.displayedValue = idIn;
+        if (setValue) {
+            this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode !== null && idInDecode !== void 0 ? idInDecode : idIn }, this.displayMode, ' - ');
+        }
+        else {
+            this.displayedValue = idIn;
+        }
         if (__classPrivateFieldGet$2(this, _KupCombobox_listEl, "f") != null) {
             __classPrivateFieldGet$2(this, _KupCombobox_listEl, "f").filter = ret.value;
         }
@@ -27568,7 +27585,7 @@ const KupColorPicker = /*@__PURE__*/ proxyCustomElement(class KupColorPicker ext
     render() {
         let widget = null;
         if (this.swatchOnly) {
-            widget = (h$1("button", { key: 'db40db59729d3d48f13a412cf6bbefb3ed9b5763', disabled: this.disabled, class: "color-picker", onClick: () => this.openPicker(), style: {
+            widget = (h$1("button", { key: 'f499be9b6cbcc51c02384107f08f91d611a0571d', disabled: this.disabled, class: "color-picker", onClick: () => this.openPicker(), style: {
                     backgroundColor: this.value,
                 }, type: "button" }));
         }
@@ -27578,7 +27595,7 @@ const KupColorPicker = /*@__PURE__*/ proxyCustomElement(class KupColorPicker ext
         const style = {
             ['--kup_colorpicker_thumb_color']: this.value ? this.value : '',
         };
-        return (h$1(Host, { key: '8e32caa5948b79dfedc3d84d649998b2b918ac44', style: style }, h$1("style", { key: 'c332452428ca96ae5919450957aa70509db27d65' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '27af58056ecf3581fbe024db4bed5c8892167c4b', id: componentWrapperId }, widget)));
+        return (h$1(Host, { key: '78317a95daf79794261dfc7c32888c35b3f9a405', style: style }, h$1("style", { key: 'f5dd6e670608ebb3d1b52ae8939fe0eafc3eecf4' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '4353d435e6435b72d24df9290f047ae14719d5fb', id: componentWrapperId }, widget)));
     }
     disconnectedCallback() {
         if (this.card) {
@@ -27946,13 +27963,13 @@ const KupChip = /*@__PURE__*/ proxyCustomElement(class KupChip extends H {
             props.onFocus.push((chip) => this.onKupFocus(chip));
             props.onIconClick.push((chip) => this.onKupIconClick(chip));
         }
-        return (h$1(Host, { key: '10170c38c86ffd70e152c2aa66de827fa61bbe5d', "onKup-autocomplete-itemclick": (e) => {
+        return (h$1(Host, { key: 'ecaf4300c520cb3137be48ff22bd418b05148a7b', "onKup-autocomplete-itemclick": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-combobox-itemclick": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
             }, "onKup-textfield-change": (e) => {
                 __classPrivateFieldGet$1(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
-            } }, h$1("style", { key: '4b6d0bf20da0a022d4e3b1bfb7f46077d0b9311e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'fbcd955d025dc2a46af83e845ff5547437aa9517', id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h$1(FChip, Object.assign({}, props)) : null, h$1("slot", { key: '7dc37ecbf9bf870abd6b095abc36b46d41abc98b', name: "field" }))));
+            } }, h$1("style", { key: '3b36ccf49c269bafbd7a58c7681ede5d708fca63' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '68560c06c332ca10129a22789378b0295f491798', id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h$1(FChip, Object.assign({}, props)) : null, h$1("slot", { key: 'c21b6c225ed6a9c252b6a7f8a8800079668eae6f', name: "field" }))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -28295,7 +28312,7 @@ const KupCheckbox = /*@__PURE__*/ proxyCustomElement(class KupCheckbox extends H
             onChange: () => this.onKupChange(),
             onFocus: () => this.onKupFocus(),
         };
-        return (h$1(Host, { key: '49e622bc2765eb035a4fc7fb3bb74a4d14139814' }, h$1("style", { key: '84449423404feca3fbd75a958ce27966ce9df264' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '344301e2e5177f969fe51753e10096af5cd266d3', id: componentWrapperId }, h$1(FCheckbox, Object.assign({ key: '698c12b5ee7e07487fd571610923e468ca962113' }, props)))));
+        return (h$1(Host, { key: 'b37176baab7fb2405afe72dafb8ce7b581eecd9f' }, h$1("style", { key: '88e82eb7e0ec3162ddf90a50e0acbdf61ed9d216' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '3e2919a4a4a7920f9a16d230cd321d65a7dc0be5', id: componentWrapperId }, h$1(FCheckbox, Object.assign({ key: 'e768196bdabf90f74ded35275c64c0ef43cef8a1' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -30843,6 +30860,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         this.error = '';
         this.icon = null;
         this.initialValue = '';
+        this.initialValueDecode = '';
         this.isClearable = false;
         this.inputDelay = 300;
         this.label = null;
@@ -30866,7 +30884,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
     }
     onKupChange(value) {
         __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-        const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
+        const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, undefined, true);
         if (ret.exists || this.allowInconsistentValues) {
             this.kupChange.emit({
                 comp: this,
@@ -30895,7 +30913,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
     }
     onKupInput() {
         __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-        const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
+        const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, undefined, false);
         __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
         if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
             this.kupInput.emit({
@@ -31027,9 +31045,9 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
      * Sets the value of the component.
      * @param {string} value - Value of the component.
      */
-    async setValue(value) {
+    async setValue(value, valueDecode) {
         __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, true);
+        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, value, valueDecode, true);
     }
     /*-------------------------------------------------*/
     /*          L i f e c y c l e   H o o k s          */
@@ -31047,7 +31065,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         }
     }
     componentDidLoad() {
-        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, true);
+        __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, this.value, this.initialValueDecode, true);
         __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").debug.logLoad(this, true);
     }
     componentWillRender() {
@@ -31093,7 +31111,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h$1(Host, { key: 'e071f887272b6a61ded68fe346e06f435b7ed5fd', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: 'd64fbead02db8af1d847e01f972da2d58e98ce5e' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '7d4bef4c6b33fea2891a3a047834cbc6dc806b1b', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: '48045c5f0499a5cda041bfbe73a9fa36a83023f4' }, props, { icon: this.showDropDownIcon
+        return (h$1(Host, { key: '6c6984c561fbaf949568952ceee8324f9333e985', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1("style", { key: '5acaeeee7db6cabf2a0efd7a5b2cde40ef401c7f' }, __classPrivateFieldGet(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), h$1("div", { key: '8dfc42e263835c1bbee764eff2054badc2e37cf5', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupAutocomplete_elStyle, "f") }, h$1(FTextField, Object.assign({ key: 'ca4b6551eee15cdf162eb4d9952daa66285810a2' }, props, { icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : 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"));
@@ -31119,6 +31137,7 @@ const KupAutocomplete = /*@__PURE__*/ proxyCustomElement(class KupAutocomplete e
         "error": [1],
         "icon": [1],
         "initialValue": [1, "initial-value"],
+        "initialValueDecode": [1, "initial-value-decode"],
         "isClearable": [4, "is-clearable"],
         "inputDelay": [2, "input-delay"],
         "label": [1],
@@ -31179,7 +31198,7 @@ _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle =
     __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) {
+}, _KupAutocomplete_consistencyCheck = function _KupAutocomplete_consistencyCheck(idIn, idInDecode, setValue) {
     if (!__classPrivateFieldGet(this, _KupAutocomplete_doConsistencyCheck, "f")) {
         return;
     }
@@ -31195,7 +31214,12 @@ _KupAutocomplete_doConsistencyCheck = new WeakMap(), _KupAutocomplete_elStyle =
         }
     }
     else {
-        this.displayedValue = idIn;
+        if (setValue) {
+            this.displayedValue = getIdOfItemByDisplayMode({ id: idIn, value: idInDecode !== null && idInDecode !== void 0 ? idInDecode : idIn }, this.displayMode, ' - ');
+        }
+        else {
+            this.displayedValue = idIn;
+        }
         if (__classPrivateFieldGet(this, _KupAutocomplete_listEl, "f") != null && !this.serverHandledFilter) {
             __classPrivateFieldGet(this, _KupAutocomplete_listEl, "f").filter = ret.value;
         }

package/dist/components/{p-ae5af2ad.js → p-ddee2d87.js}

@@ -1,17 +1,17 @@
 import { p as proxyCustomElement, H, h, f as forceUpdate } from './p-2e5f2e07.js';
-import { g as ganttDateRangeFromTask, s as seedDates, d as defineCustomElement$5 } from './p-be17920c.js';
+import { g as ganttDateRangeFromTask, s as seedDates, d as defineCustomElement$5 } from './p-a9d55e91.js';
 import { r as removeHiddenTasks, s as sortTasks } from './p-9aa93983.js';
-import { c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection, d as defineCustomElement$9 } from './p-af3fcbd9.js';
-import { d as defineCustomElement$c } from './p-babf447c.js';
+import { c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection, d as defineCustomElement$9 } from './p-55e884c9.js';
+import { d as defineCustomElement$c } from './p-b275e6a3.js';
 import { d as defineCustomElement$b } from './p-0e6c0355.js';
-import { d as defineCustomElement$a } from './p-22b40453.js';
-import { d as defineCustomElement$8 } from './p-d8b0f5eb.js';
-import { d as defineCustomElement$7 } from './p-c97810e2.js';
-import { d as defineCustomElement$6 } from './p-f7c2ca1d.js';
-import { d as defineCustomElement$4 } from './p-ff8bdafd.js';
-import { d as defineCustomElement$3 } from './p-822c3930.js';
-import { d as defineCustomElement$2 } from './p-3466bd5a.js';
-import { d as defineCustomElement$1 } from './p-79c12fc7.js';
+import { d as defineCustomElement$a } from './p-9de12833.js';
+import { d as defineCustomElement$8 } from './p-d54bf97d.js';
+import { d as defineCustomElement$7 } from './p-036b91a6.js';
+import { d as defineCustomElement$6 } from './p-4d095265.js';
+import { d as defineCustomElement$4 } from './p-535c2227.js';
+import { d as defineCustomElement$3 } from './p-4311404d.js';
+import { d as defineCustomElement$2 } from './p-08373053.js';
+import { d as defineCustomElement$1 } from './p-4c7ef355.js';
 
 const kupGanttCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.wrapper{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}.ganttContainer{background:var(--kup-layer-2);border-radius:var(--kup-radius-00);overflow:hidden;padding:var(--kup-space-05)}.ganttVerticalContainer{overflow:hidden;font-size:0;margin:0;padding:0}.horizontalContainer{margin:0;padding:0;overflow:hidden}.horizontalContainerScrollable{overflow:auto !important;scrollbar-width:0}.horizontalContainerScrollable::-webkit-scrollbar{width:0;height:0}.task-gantt{overflow:hidden}";
 const KupGanttStyle0 = kupGanttCss;
@@ -579,9 +579,9 @@ const KupGantt = /*@__PURE__*/ proxyCustomElement(class KupGantt extends H {
             TaskListHeader: this.TaskListHeader,
             TaskListTable: this.TaskListTable
         };
-        return (h("div", { key: '7ca3df83876dbea0f57536a3eb9a7978af4f18f2', class: "gannt-wrapper-main" }, h("div", { key: '411ce55a1a2de1fb2c77b6fa5395237d7f93d857', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: '64361b6d13020fa1b26a8742ea6fb14007c5f946', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+        return (h("div", { key: '818930e7cdf7b7d2a734ef9767fbaa633b764245', class: "gannt-wrapper-main" }, h("div", { key: '51619f1317a5428f603208961c8c05e0a18a8b62', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (h("kup-task-list", Object.assign({ key: 'ee80c9b92bf3fbaacb6e012a8c47c23a79dff364', currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
                 this.taskListScrollWidth = width;
-            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: 'd34dcf0103274551222a40e44a17a93d770458d6', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: '97d5ed31d1fe2afc1675a20a6ad176c75262adc0', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: '6020a60fc2d928cd5e89f8e1f58957f001b59445', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '1a7891ac340db8c729ea2ef6237b81baede2b02d', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '09bf9b1ba7c12634ad8cff558ac4369c3b5f4521', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), class: "ganttContainer" }), this.ganttEvent.changedTask && (h("kup-tooltip", { key: '187c6bec18c73cfb59d797bae2bdf11c6eddad86', arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), h("kup-vertical-scroll", { key: 'f1b68b38471ce97b934bce439ccfcfd5b540b2b0', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (h("kup-horizontal-scroll", { key: '9ef52219a92fa78b79504ff5c1aba0c532e1ede1', svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     get rootElement() { return this; }
     static get watchers() { return {

package/dist/esm/{f-cell-1256023f.js → f-cell-23d78e15.js}

@@ -608,7 +608,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     var _a, _b, _c, _d;
     switch (cellType) {
         case FCellTypes.AUTOCOMPLETE:
-            return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
+            return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-autocomplete-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.CHECKBOX:
             if (isAutoCentered(props)) {
                 classObj[FCellClasses.C_CENTERED] = true;
@@ -627,7 +627,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
         case FCellTypes.COLOR_PICKER:
             return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.COMBOBOX:
-            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
+            return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value, initialValueDecode: cell.decode }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), "onKup-combobox-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.DATE:
             return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onKup-datepicker-blur": (e) => cellEvent(e, props, cellType, FCellEvents.BLUR) })));
         case FCellTypes.MULTI_AUTOCOMPLETE: