@sme.up/ketchup 10.3.8 → 10.3.9

package/dist/collection/components/kup-date-picker/kup-date-picker.js

@@ -1,15 +1,15 @@
 import { forceUpdate, h, Host, } from "@stencil/core";
-import { KupComponentSizing, } from "../../types/GenericTypes";
-import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
-import { KupDatePickerProps, } from "./kup-date-picker-declarations";
-import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
-import { componentWrapperId } from "../../variables/GenericVariables";
-import { KupDatesFormats } from "../../managers/kup-dates/kup-dates-declarations";
 import { FTextField } from "../../f-components/f-text-field/f-text-field";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
+import { KupDatesFormats } from "../../managers/kup-dates/kup-dates-declarations";
+import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
 import { KupDynamicPositionPlacement } from "../../managers/kup-dynamic-position/kup-dynamic-position-declarations";
-import { KupCardFamily, } from "../kup-card/kup-card-declarations";
+import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
+import { KupComponentSizing, } from "../../types/GenericTypes";
 import { getProps } from "../../utils/utils";
+import { componentWrapperId } from "../../variables/GenericVariables";
+import { KupCardFamily, } from "../kup-card/kup-card-declarations";
+import { KupDatePickerProps, } from "./kup-date-picker-declarations";
 export class KupDatePicker {
     constructor() {
         /*-------------------------------------------------*/
@@ -395,7 +395,7 @@ export class KupDatePicker {
                 showPreviousNextMonthDays: this.showPreviousNextMonthDays,
             },
         };
-        return (h(Host, { key: '4c53bd7bac94334e6e7cbc3992da2024a2062fdf' }, h("style", { key: '625ecea49d44c9451c9174b43a7ef1b69bae392e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'b50d12bb7550d9cddaed8c1429dbde2ab6b88777', id: componentWrapperId }, h(FTextField, Object.assign({ key: 'c2f78eae07d993dcaf2454329de981006c1ffa1e' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h("div", { key: 'a73631f1dc1e6fb33c9b17a02bcbc1101f3ce88d', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h("kup-card", { key: 'aec6de4c78ee91185b91485b4d9045026ff84ba1', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
+        return (h(Host, { key: '827b64b4e81a6238bd45388c3f5234a29685ce74' }, h("style", { key: '4bb32836db6bd0e39579f52abbd5b29cef9d2bf6' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f8549d32cf3813544c56ad90f7b6e619dd131a53', id: componentWrapperId }, h(FTextField, Object.assign({ key: 'b561786c364f4f27b5edba3746202a8a6d5301b3' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h("div", { key: '136e15a45145ed9160a7da70ec0444ff417ec0c7', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h("kup-card", { key: '5dd13a969e65cd4a6b4ebc9ea96019904ab7ffd6', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
                 if (ev.detail.value != null &&
                     ev.detail.value != '')
                     this.onKupDatePickerItemClick(ev.detail.value);

package/dist/collection/components/kup-file-upload/kup-file-upload-declarations.js

@@ -1,7 +1,10 @@
 export var KupFileUploadProps;
 (function (KupFileUploadProps) {
     KupFileUploadProps["customStyle"] = "Custom style of the component.";
+    KupFileUploadProps["error"] = "Error string to render in component";
     KupFileUploadProps["pathString"] = "The initial filepaths.";
     KupFileUploadProps["FupMul"] = "Sets the multiple upload.";
     KupFileUploadProps["FupAut"] = "Sets the auto upload of select file";
+    KupFileUploadProps["FupDir"] = "Sets the custom dir to upload files";
+    KupFileUploadProps["FupAty"] = "Sets the accepted extensions";
 })(KupFileUploadProps || (KupFileUploadProps = {}));

package/dist/collection/components/kup-file-upload/kup-file-upload.css

@@ -151,6 +151,15 @@
   padding: 1em;
   position: relative;
 }
+:host .file-upload__invalid {
+  border-color: var(--kup-danger-color, #d32f2f);
+  background: rgba(211, 47, 47, 0.06);
+  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15) inset;
+  cursor: not-allowed;
+}
+:host .file-upload__invalid * {
+  opacity: 0.95;
+}
 :host .file-upload__buttons {
   display: flex;
   gap: 1em;

package/dist/collection/components/kup-file-upload/kup-file-upload.js

@@ -5,7 +5,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         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 _KupFileUpload_instances, _KupFileUpload_kupManager, _KupFileUpload_previewMap, _KupFileUpload_handleClick, _KupFileUpload_handleFileChange, _KupFileUpload_handleFileRemove, _KupFileUpload_handleDrop, _KupFileUpload_handleCancel, _KupFileUpload_getPreview, _KupFileUpload_trimFileName, _KupFileUpload_uploadClick;
+var _KupFileUpload_instances, _KupFileUpload_kupManager, _KupFileUpload_previewMap, _KupFileUpload_handleClick, _KupFileUpload_handleFileChange, _KupFileUpload_handleDrop, _KupFileUpload_handleFileRemove, _KupFileUpload_processFiles, _KupFileUpload_handleCancel, _KupFileUpload_getPreview, _KupFileUpload_trimFileName, _KupFileUpload_uploadClick, _KupFileUpload_getUniqueFiles, _KupFileUpload_isValidDraggedItems, _KupFileUpload_areValidFiles, _KupFileUpload_isValidFile, _KupFileUpload_getFileExtension;
 import { forceUpdate, Host, h, Fragment, } from "@stencil/core";
 import { kupManagerInstance } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
@@ -47,22 +47,27 @@ export class KupFileUpload {
         this.inputRef = undefined;
         this.tempFiles = [];
         this.pathFiles = [];
-        this.uploadSuccess = false;
         this.showSpinner = false;
         this.multiUpload = false;
         this.autoUpload = false;
         this.acceptedFiles = null;
+        this.isValidDropFiles = true;
+        this.fupError = null;
     }
     //#endregion
     //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
+    onErrorChange() {
+        this.fupError = this.error;
+    }
     onDataChanged() {
         var _a;
-        this.uploadSuccess = false;
+        this.fupError = '';
         __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
-        this.pathFiles = ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';')) || [];
+        this.pathFiles =
+            ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';').filter((path) => path.trim())) || [];
     }
     onFupMulChanged() {
         this.multiUpload = this.FupMul === 'true';
@@ -108,7 +113,6 @@ export class KupFileUpload {
         this.setLoading(false);
         if (success && pathFiles) {
             __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
-            this.uploadSuccess = success;
             this.pathFiles = this.multiUpload
                 ? [...this.pathFiles, ...pathFiles.split(';')]
                 : [pathFiles.split(';')[0]];
@@ -152,10 +156,15 @@ export class KupFileUpload {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'f08391eac6f841cb117304af6a09ae63ff92549b' }, h("style", { key: 'acc0df4a07fdd65f35182769077763a9643f34b0' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '11e1fb63a9949c804f9b41236c218b80eef965a1', id: componentWrapperId }, h("div", { key: '8cf8270d6e066bc361feda602a82ac97657853a4', class: {
+        return (h(Host, { key: 'e82c20508f86798008b2e961f2cef347ea19908f' }, h("style", { key: 'f9549e18810a5d38d300c167142d41e783d9e80d' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '09d2ae3e36a7e871aba975ccbb745472cb63652f', id: componentWrapperId }, h("div", { key: 'c2b798c7bf6cababc587990b710515060bb2e2a8', class: {
                 'file-upload': true,
                 'file-upload-spinner': this.showSpinner,
-            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragOver: (event) => event.preventDefault() }, h("input", { key: 'a34748d05872c863c0f96ef5a8e4fa36f549f1ae', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, accept: (_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.join(','), hidden: true }), h("div", { key: 'cc13058c673bc816ff51e8278b187c87a1ef4467', class: "file-upload__buttons" }, h(FButton, { key: 'b54e4ff41658b67e1700b2d4c06885ea37ae3004', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h(Fragment, { key: 'd2df1fc3e94dc20573226456a5131599140817d3' }, h(FButton, { key: '6b05c656c460218841c85e4f07dde8965f47c36e', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: '70ac6c463966d7e0fd2f69a59a648334587d46ef', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.error && (h("div", { key: '90c46db7caa99ba8460b0b925135ef1c9223e3e8', class: "file-upload__error" }, h("span", { key: '5a50f58e4d6e6cd87ac3074d48c849fc54716de5', class: "mdc-error-message" }, this.error))), this.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.tempFiles.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) })))))), this.pathFiles.length ? (h("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h("span", { class: "file-upload__list__item" }, h("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h("div", { key: '4cf819053c80ffaff9225fa351e9c1c3f37791b6', class: "file-upload__spinner-container" }, h("kup-spinner", { key: '3e1c322698976c8243fd6e9aefc678727056f8ea', active: true, layout: 14, dimensions: "7px" })))))));
+                'file-upload__invalid': !this.isValidDropFiles,
+            }, onDragOver: (event) => {
+                var _a;
+                event.preventDefault();
+                this.isValidDropFiles = __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_isValidDraggedItems).call(this, (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items);
+            }, onDrop: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleDrop).bind(this), onDragLeave: () => (this.isValidDropFiles = true), onDragEnd: () => (this.isValidDropFiles = true) }, h("input", { key: 'a79897d0ea5885a55a71f04ce39bbd4791e1462d', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, accept: (_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.join(','), hidden: true }), h("div", { key: '856a74817a14d88844efb2b9ad765e8d7223d547', class: "file-upload__buttons" }, h(FButton, { key: '1eb230b6313b6fb9e65f178b9e4edd0592e87e20', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), !this.autoUpload && (h(Fragment, { key: 'df73268c675f6bf4ce81cd44c80a01305adf2f97' }, h(FButton, { key: '821b641f32a70972892b624d8ac55a9e38faaa14', icon: "save", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.UPLOAD), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_uploadClick).bind(this), styling: FButtonStyling.FLAT }), h(FButton, { key: 'f8f969b3eb16bd86dcd4826b3c3f46f8f8551b8f', icon: "clear", disabled: !this.tempFiles.length, label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.ABORT), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).bind(this), styling: FButtonStyling.FLAT })))), this.fupError && (h("div", { key: '2b760c793e980290ffb0847f46d0d5fb0abfac73', class: "file-upload__error" }, h("span", { key: '4c1a2cd135f330cf0dbda3f4da6dca78a5a298d4', class: "mdc-error-message" }, this.fupError))), h("div", { key: 'a034a8a57062eba3445e29168f740b867d5085a7', class: "file-upload__list" }, this.tempFiles.map((file, i) => (h("div", { class: "file-upload__list__item" }, h("div", { class: "file-upload__list__item__preview" }, h(FImage, { resource: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getPreview).call(this, file), placeholderResource: "file" })), h("span", { class: "file-upload__list__item__desc", title: file.name }, __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_trimFileName).call(this, file.name)), h("span", { class: "file-upload__list__item__clear", onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileRemove).bind(this, i) }))))), this.pathFiles.length ? (h("div", { class: "file-upload__list" }, this.pathFiles.map((path, i) => (h("span", { class: "file-upload__list__item" }, h("span", null, i + 1, ". ", path)))))) : null, this.showSpinner && (h("div", { key: 'cda18a34e433799f62f0026f4b38af748d39d2d7', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'cb010ba98b016941a087af4b250be33f675ac3fa', active: true, layout: 14, dimensions: "7px" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.unregister(this);
@@ -317,7 +326,7 @@ export class KupFileUpload {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "'false'"
+                            "text": "'undefined'"
                         }],
                     "text": "Error string to render in component"
                 },
@@ -332,11 +341,12 @@ export class KupFileUpload {
             "inputRef": {},
             "tempFiles": {},
             "pathFiles": {},
-            "uploadSuccess": {},
             "showSpinner": {},
             "multiUpload": {},
             "autoUpload": {},
-            "acceptedFiles": {}
+            "acceptedFiles": {},
+            "isValidDropFiles": {},
+            "fupError": {}
         };
     }
     static get events() {
@@ -542,6 +552,9 @@ export class KupFileUpload {
     static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
+                "propName": "error",
+                "methodName": "onErrorChange"
+            }, {
                 "propName": "pathString",
                 "methodName": "onDataChanged"
             }, {
@@ -559,11 +572,40 @@ export class KupFileUpload {
 _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakMap(), _KupFileUpload_instances = new WeakSet(), _KupFileUpload_handleClick = function _KupFileUpload_handleClick() {
     this.inputRef.click();
 }, _KupFileUpload_handleFileChange = function _KupFileUpload_handleFileChange(event) {
-    this.uploadSuccess = false;
-    this.error = '';
-    const newFiles = Array.from(event.target.files);
-    this.tempFiles = [...this.tempFiles, ...newFiles];
+    this.fupError = '';
+    const newFiles = Array.from(event.target.files) || [];
+    if (!this.multiUpload && newFiles.length > 1) {
+        return;
+    }
     this.inputRef.value = '';
+    __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_processFiles).call(this, newFiles);
+}, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
+    event.preventDefault();
+    this.fupError = '';
+    this.isValidDropFiles = true;
+    const droppedFiles = event.dataTransfer.files;
+    if ((droppedFiles === null || droppedFiles === void 0 ? void 0 : droppedFiles.length) <= 0) {
+        return;
+    }
+    if (!this.multiUpload && droppedFiles.length > 1) {
+        return;
+    }
+    const newFiles = Array.from(droppedFiles);
+    __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_processFiles).call(this, newFiles);
+}, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
+    this.tempFiles = [
+        ...this.tempFiles.splice(0, index),
+        ...this.tempFiles.splice(index + 1),
+    ];
+}, _KupFileUpload_processFiles = function _KupFileUpload_processFiles(newFiles) {
+    if (!__classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_areValidFiles).call(this, newFiles)) {
+        return;
+    }
+    this.tempFiles = this.multiUpload
+        ? // Add new files
+            __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getUniqueFiles).call(this, [...this.tempFiles, ...newFiles])
+        : // Reset files
+            newFiles;
     if (this.autoUpload) {
         this.kupUpload.emit({
             comp: this,
@@ -572,19 +614,6 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
         });
         this.setLoading(true);
     }
-}, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
-    this.tempFiles = [
-        ...this.tempFiles.splice(0, index),
-        ...this.tempFiles.splice(index + 1),
-    ];
-}, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
-    event.preventDefault();
-    this.uploadSuccess = false;
-    const droppedFiles = event.dataTransfer.files;
-    if (droppedFiles.length > 0) {
-        const newFiles = Array.from(droppedFiles);
-        this.tempFiles = [...this.tempFiles, ...newFiles];
-    }
 }, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
     this.tempFiles = [];
 }, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
@@ -611,4 +640,49 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
         files: this.tempFiles,
     });
     this.setLoading(true);
+}, _KupFileUpload_getUniqueFiles = function _KupFileUpload_getUniqueFiles(files) {
+    const uniqueFiles = files.reduce((map, file) => {
+        const key = `${file.name}-${file.size}-${file.lastModified}`;
+        map.set(key, file);
+        return map;
+    }, new Map());
+    return Array.from(uniqueFiles.values());
+}, _KupFileUpload_isValidDraggedItems = function _KupFileUpload_isValidDraggedItems(items) {
+    if (!(items === null || items === void 0 ? void 0 : items.length) || (!this.multiUpload && items.length > 1)) {
+        return false;
+    }
+    for (const item of Array.from(items)) {
+        if (item.kind != 'file') {
+            return false;
+        }
+    }
+    return true;
+}, _KupFileUpload_areValidFiles = function _KupFileUpload_areValidFiles(files) {
+    if (!(files === null || files === void 0 ? void 0 : files.length)) {
+        return false;
+    }
+    for (const file of files) {
+        if (!__classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_isValidFile).call(this, file)) {
+            return false;
+        }
+    }
+    return true;
+}, _KupFileUpload_isValidFile = function _KupFileUpload_isValidFile(file) {
+    var _a;
+    if (!((_a = this.acceptedFiles) === null || _a === void 0 ? void 0 : _a.length)) {
+        return true;
+    }
+    // Check extensions
+    const fileExtension = __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_getFileExtension).call(this, file.name);
+    const isValid = fileExtension
+        ? this.acceptedFiles.includes(fileExtension)
+        : false;
+    if (!isValid) {
+        // Set extension error
+        this.fupError = __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.INVALID_EXTENSION);
+    }
+    return isValid;
+}, _KupFileUpload_getFileExtension = function _KupFileUpload_getFileExtension(fileName) {
+    const dotIndex = fileName.lastIndexOf('.');
+    return dotIndex >= 0 ? fileName.substring(dotIndex).toLowerCase() : '';
 };

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

@@ -408,7 +408,7 @@ export class KupForm {
     render() {
         let formContent = null;
         if (this.data.rows.length === 0) {
-            formContent = (h("p", { key: '103de9b30f44f7958a691e5dccc8698e49ca76cf' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
+            formContent = (h("p", { key: 'e6e94006b6a608e301373fdb7a4ca02665b2d844' }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
         }
         else {
             const rows = this.data.rows;
@@ -419,7 +419,7 @@ export class KupForm {
                 formContent.push(this.renderRow(rows[cnt++]));
             }
         }
-        return (h(Host, { key: 'cdaa7ff6add189834cc6f570d2a7cd032d3a0b3c' }, h("style", { key: 'd9eff3af01d39df16086be74e2c893b64f861e52' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd4dd031f9dac773296738ebfe27510be56af8e5a', id: componentWrapperId }, formContent)));
+        return (h(Host, { key: 'c6fb5b3851606811f0c1cab66ce83f00c3073cd7' }, h("style", { key: '7451643bd2809dd41742977dc0c8ffaf2d29017c' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f68f672b0a6f03a01577a5120e8f3e74385a0373', id: componentWrapperId }, formContent)));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

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

@@ -138,9 +138,6 @@
 #kup-component .kup-htm.is-link {
   height: 100%;
 }
-#kup-component .kup-htm.is-link a {
-  float: left;
-}
 #kup-component .kup-htm.is-link iframe {
   min-height: 600px;
   width: 100%;

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

@@ -19,6 +19,9 @@ export class KupHTM {
         /*       I n t e r n a l   V a r i a b l e s       */
         /*-------------------------------------------------*/
         _KupHTM_kupManager.set(this, kupManagerInstance());
+        this.openInNewTab = (url) => {
+            window.open(url, '_blank', 'noopener,noreferrer');
+        };
         this.data = undefined;
     }
     /*-------------------------------------------------*/
@@ -69,7 +72,7 @@ export class KupHTM {
     render() {
         var _a;
         const isLink = __classPrivateFieldGet(this, _KupHTM_instances, "m", _KupHTM_isObjectCompatibleWithHTM).call(this, (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a.obj);
-        return (h(Host, { key: 'd4c059a573d252c5809a77375222a78bcdee56bc' }, h("style", { key: '46ea04367aae5ad0602ab6f84dc0cb904b14e091' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3d2ad3be208bd0cb850e66113155b70ace70983c', id: componentWrapperId }, h("div", { key: '075017b3ef686bfc5d6cee4035c3b053c11d67af', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("a", { href: this.data.value, target: "_blank", rel: "noopener noreferrer" }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB)), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
+        return (h(Host, { key: '7e74bdbde1456c74a177350f6d0dc68da4e15b23' }, h("style", { key: 'e284b80b52c6ff7c47e908fdcf4a8631428acd29' }, __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '79e75e97a2e72abf83c6efb3564dd36e6c8605ad', id: componentWrapperId }, h("div", { key: '37d4acd00efe5cda11ef5d0572d391ff278fd4c7', class: `kup-htm ${isLink ? 'is-link' : ''}` }, isLink ? (h(Fragment, null, h("kup-button", { label: __classPrivateFieldGet(this, _KupHTM_kupManager, "f").language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB), sizing: 'small', class: 'kup-secondary', icon: "open-in-new", styling: 'flat', trailingIcon: true, onClick: () => this.openInNewTab(this.data.value) }), h("iframe", { src: this.data.value, frameBorder: "0" }))) : (h("div", { innerHTML: this.data.value }))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupHTM_kupManager, "f").theme.unregister(this);

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -205,14 +205,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: '4a3c80748fec9b98c9268077893643042b2c4ade' }, h("style", { key: '5fbc10ef98292d3cc1919d26cf64baa1286611e4' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '52254d30b66446960be0db63fdf486420d35a7ce', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'd3dd048c9d3557174d5feb3b6ba6203ea5ecafe7' }, h("style", { key: '8178c806d90f4852441e8b18743bfd0f6836d6ef' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd349af3c953aa70469c19f3868e5e850374996a0', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '68cb3d98496d6314556ad5d777e6a67543a14ff3', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '5501f3c1eb46fa4e856248c1e876de729a68195a', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: '4b808d9230730a0eb49c5eca46a8130eda1c0f51', class: "mdc-text-field__label-container" }, h("label", { key: 'c1fcdb83116da8e7591091fcb97ea6c4ecb19a27', class: "mdc-label" }, this.leadingLabel))), h("div", { key: 'f0b462e13602be5a3a8c00ffd993fd9c8b02476a', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), this.leadingLabel && (h("div", { key: 'e3a0c1acb410e52590a0309b9d1863ab75d2a6b5', class: "mdc-text-field__label-container" }, h("label", { key: 'a182435d28cf9ae405f61fda93794c5d81a5ed3e', class: "mdc-label" }, this.leadingLabel))), h("div", { key: '5df777d415c2ae7eeb95f22ce229614948b9a4c7', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));

package/dist/collection/components/kup-input-panel/kup-input-panel-declarations.js

@@ -8,6 +8,7 @@ export var KupInputPanelProps;
     KupInputPanelProps["customStyle"] = "Custom style of the component.";
     KupInputPanelProps["data"] = "Actual data of the input panel.";
     KupInputPanelProps["hiddenSubmitButton"] = "Creates a hidden submit button in order to submit the form with enter.";
+    KupInputPanelProps["commandBarPosition"] = "Manage the position of the command bar (submit button and other commands).";
     KupInputPanelProps["submitCb"] = "Sets the callback function on submit form";
     KupInputPanelProps["optionsHandler"] = "Sets the callback function to recieve options";
     KupInputPanelProps["buttonPosition"] = "Manage the position of the buttons related to the input panel content. It is an enumeration";

package/dist/collection/components/kup-input-panel/kup-input-panel.css

@@ -277,4 +277,13 @@
   display: flex;
   align-items: end;
   gap: 1rem;
+}
+:host .input-panel__helper-icon {
+  cursor: help;
+  height: 16px;
+  opacity: 0.375;
+  position: absolute;
+  right: -18px;
+  top: -2px;
+  width: 16px;
 }

package/dist/collection/components/kup-input-panel/kup-input-panel.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_skipRenderField, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_isFCellEventPayload, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_ImageListAdapter, _KupInputPanel_FileUploadAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableCMBandACPOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_getTblAutocompleteEventCallback, _KupInputPanel_manageTblItemClick, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip, _KupInputPanel_upload;
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_formRef, _KupInputPanel_optionsAdapterMap, _KupInputPanel_originalData, _KupInputPanel_listeners, _KupInputPanel_cellTypeComponents, _KupInputPanel_cellTypesNeedingReset, _KupInputPanel_cellCustomRender, _KupInputPanel_sectionRenderMap, _KupInputPanel_readyPromise, _KupInputPanel_readyResolve, _KupInputPanel_helperEl, _KupInputPanel_getCell, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_hideHelper, _KupInputPanel_showHelper, _KupInputPanel_renderButton, _KupInputPanel_renderDropDownButton, _KupInputPanel_renderEditor, _KupInputPanel_renderDataTable, _KupInputPanel_renderLabel, _KupInputPanel_getLabelComponent, _KupInputPanel_renderGridLayout, _KupInputPanel_renderAbsoluteLayout, _KupInputPanel_renderSection, _KupInputPanel_renderAbsoluteSection, _KupInputPanel_extractContentIds, _KupInputPanel_renderSectionTab, _KupInputPanel_skipRenderField, _KupInputPanel_renderField, _KupInputPanel_renderAbsoluteField, _KupInputPanel_mapCommands, _KupInputPanel_mapCells, _KupInputPanel_setData, _KupInputPanel_deepObjectsMerge, _KupInputPanel_reverseMapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_getOptionHandler, _KupInputPanel_isFCellEventPayload, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_EDTAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter, _KupInputPanel_SWTAdapter, _KupInputPanel_DateAdapter, _KupInputPanel_ObjectAdapter, _KupInputPanel_ImageListAdapter, _KupInputPanel_TimeAdapter, _KupInputPanel_NumberAdapter, _KupInputPanel_DataTableAdapter, _KupInputPanel_getTableUpdatedCell, _KupInputPanel_optionsTreeComboAdapter, _KupInputPanel_treeOptionsNodeAdapter, _KupInputPanel_dataTreeOptionsChildrenAdapter, _KupInputPanel_tableCMBandACPOptionsAdapter, _KupInputPanel_commandAdapter, _KupInputPanel_getAutocompleteEventCallback, _KupInputPanel_getTblAutocompleteEventCallback, _KupInputPanel_manageTblItemClick, _KupInputPanel_manageInputPanelCheck, _KupInputPanel_onCellUpdate, _KupInputPanel_setCellError, _KupInputPanel_areValuesUpdated, _KupInputPanel_getFunctionOnClickBTN, _KupInputPanel_findTraversedFCell, _KupInputPanel_getEventDetails, _KupInputPanel_didLoadInteractables, _KupInputPanel_setFocusOnInputElement, _KupInputPanel_findFirstInput, _KupInputPanel_setAutoSkip, _KupInputPanel_upload;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { FButton } from "../../f-components/f-button/f-button";
 import { FCell } from "../../f-components/f-cell/f-cell";
@@ -83,11 +83,34 @@ export class KupInputPanel {
         ]));
         _KupInputPanel_readyPromise.set(this, void 0);
         _KupInputPanel_readyResolve.set(this, void 0);
+        _KupInputPanel_helperEl.set(this, null);
+        _KupInputPanel_hideHelper.set(this, () => {
+            if (__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f")) {
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").remove();
+                __classPrivateFieldSet(this, _KupInputPanel_helperEl, null, "f");
+            }
+        });
+        _KupInputPanel_showHelper.set(this, (e, text) => {
+            if (__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f")) {
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.left = `${e.clientX + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.top = `${e.clientY + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").innerText = text;
+            }
+            else {
+                __classPrivateFieldSet(this, _KupInputPanel_helperEl, document.createElement('div'), "f");
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").className = 'input-panel__helper-tooltip';
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").innerText = text;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.left = `${e.clientX + 10}px`;
+                __classPrivateFieldGet(this, _KupInputPanel_helperEl, "f").style.top = `${e.clientY + 10}px`;
+                document.body.appendChild(__classPrivateFieldGet(this, _KupInputPanel_helperEl, "f"));
+            }
+        });
         this.buttonPosition = KupInputPanelButtonsPositions.BOTTOM;
         this.customStyle = '';
         this.dashboardMode = false;
         this.data = null;
         this.hiddenSubmitButton = false;
+        this.commandBarPosition = undefined;
         this.inputPanelPosition = KupInputPanelPosition.COLUMNS;
         this.submitCb = null;
         this.optionsHandler = null;
@@ -115,7 +138,7 @@ export class KupInputPanel {
             });
             __classPrivateFieldSet(this, _KupInputPanel_listeners, [], "f");
         }
-        if (this.data) {
+        if (this.data && this.data.columns && this.data.rows) {
             __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
         }
     }
@@ -249,7 +272,7 @@ export class KupInputPanel {
                 h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
             ]
             : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
-        return (h(Host, { key: '2ec0145129f95b6456a1aa327f4284a591429a7b', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
+        return (h(Host, { key: '5f400adad4ef13867fa4cef8db5537f2e660808f', "onKup-cell-blur": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.BLUR), "onKup-cell-update": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_onCellUpdate).bind(this), "onKup-tabbar-click": (e) => {
                 this.tabSelected = e.detail.node.id;
             }, "onKup-autocomplete-input": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-autocomplete-iconclick": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).bind(this), "onKup-combobox-iconclick": (e) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getOptionHandler).call(this, e, true), "onKup-cell-itemclick": (e) => {
                 __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_manageInputPanelCheck).call(this, e, CheckTriggeringEvents.ITEMCLICK);
@@ -259,7 +282,7 @@ export class KupInputPanel {
                 this.kupInputPanelObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupInputPanelObjectFieldSelectedMenuItem.emit(e.detail);
-            }, "onKup-file-upload-upload": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_upload).bind(this) }, h("style", { key: '406b7a5832538a72f7a8120812f0ceb737a0195b' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'eb3416b062e4dadf102c8836cd9d04d87dca097b', id: componentWrapperId }, inputPanelContent)));
+            }, "onKup-file-upload-upload": __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_upload).bind(this) }, h("style", { key: 'ac5331c087b8cd5e9908361cf83d10857c956bb4' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'cd01a86ec411b5b10e8af83f3986c3fa3b55b8f5', id: componentWrapperId }, inputPanelContent)));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
@@ -397,6 +420,26 @@ export class KupInputPanel {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "commandBarPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Position of the command bar (submit button and other commands)"
+                },
+                "attribute": "command-bar-position",
+                "reflect": false
+            },
             "inputPanelPosition": {
                 "type": "string",
                 "mutable": false,
@@ -911,7 +954,7 @@ export class KupInputPanel {
             }];
     }
 }
-_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellTypesNeedingReset = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
+_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(), _KupInputPanel_optionsAdapterMap = new WeakMap(), _KupInputPanel_originalData = new WeakMap(), _KupInputPanel_listeners = new WeakMap(), _KupInputPanel_cellTypeComponents = new WeakMap(), _KupInputPanel_cellTypesNeedingReset = new WeakMap(), _KupInputPanel_cellCustomRender = new WeakMap(), _KupInputPanel_sectionRenderMap = new WeakMap(), _KupInputPanel_readyPromise = new WeakMap(), _KupInputPanel_readyResolve = new WeakMap(), _KupInputPanel_helperEl = new WeakMap(), _KupInputPanel_hideHelper = new WeakMap(), _KupInputPanel_showHelper = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_getCell = function _KupInputPanel_getCell(id) {
     if (!id) {
         return null;
     }
@@ -1004,7 +1047,7 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         } }, ((_b = layout === null || layout === void 0 ? void 0 : layout.sections) === null || _b === void 0 ? void 0 : _b.length) == 1 &&
         ((_c = layout === null || layout === void 0 ? void 0 : layout.sections[0]) === null || _c === void 0 ? void 0 : _c.title) && (h("div", { class: "input-panel__typography" }, h(FTypography, { value: layout.sections[0].title, type: FTypographyType.HEADING1 }))), h("div", { class: classObj, style: styleObj }, rowContent), h("div", { class: commandsClass }, h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit", invisible: this.hiddenSubmitButton }), this.fieldReset && (h(FButton, { buttonType: "reset", label: "Reset", wrapperClass: "form__submit", icon: "broom" })), this.inputPanelCommands))));
 }, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
-    var _a;
+    var _a, _b;
     if (!cell) {
         return;
     }
@@ -1012,7 +1055,19 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     if (customRender !== undefined) {
         return customRender(cell, column, (_a = row.layout) === null || _a === void 0 ? void 0 : _a.absolute);
     }
-    cell.data = Object.assign(Object.assign({}, cell.data), { sizing: 'extra-small' });
+    cell.data = Object.assign(Object.assign({}, cell.data), { sizing: 'extra-small', labelHelper: column.helper });
+    const subcompData = (_b = cell.data) === null || _b === void 0 ? void 0 : _b.data;
+    if (subcompData) {
+        const hasTextFieldProps = Object.keys(subcompData).includes('kup-text-field');
+        if (!hasTextFieldProps) {
+            subcompData['kup-text-field'] = {
+                labelHelper: column.helper,
+            };
+        }
+        else {
+            subcompData['kup-text-field'].labelHelper = column.helper;
+        }
+    }
     const cellProps = {
         cell,
         column,
@@ -1023,10 +1078,27 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         setSizes: true,
     };
     const label = __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getLabelComponent).call(this, cell, column.title);
+    const fcell = h(FCell, Object.assign({}, cellProps));
     if (label) {
-        return (h("div", { class: { 'input-panel__label_container': true } }, label, h(FCell, Object.assign({}, cellProps))));
+        /*
+        const hasHelper = Boolean(column?.helper) || true;
+        const helper = hasHelper ? (
+            <span
+                class="input-panel__helper-icon"
+                onPointerMove={(e) => this.#showHelper(e, column.helper)}
+                onPointerDown={(e) => this.#showHelper(e, column.helper)}
+                onPointerOut={() => this.#hideHelper()}
+            >
+                <FImage
+                    resource="info-outline"
+                    title={column.helper}
+                ></FImage>
+            </span>
+        ) : null;
+        */
+        return (h("div", { class: { 'input-panel__label_container': true } }, label, fcell));
     }
-    return h(FCell, Object.assign({}, cellProps));
+    return fcell;
 }, _KupInputPanel_renderButton = function _KupInputPanel_renderButton(cell, { name }) {
     const renderedButton = (h(FButton, Object.assign({ icon: cell.icon, placeholderIcon: cell.placeholderIcon, id: name }, cell.data, { wrapperClass: "form__submit" })));
     return renderedButton;
@@ -1446,13 +1518,13 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         [FCellTypes.TABLE, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_DataTableAdapter).bind(this)],
         [FCellTypes.TIME, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_TimeAdapter).bind(this)],
         [FCellTypes.IMAGE_LIST, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_ImageListAdapter).bind(this)],
-        [FCellTypes.FILE_UPLOAD, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_FileUploadAdapter).bind(this)],
     ]);
     const adapter = dataAdapterMap.get(cellType);
     return adapter
         ? adapter(options, fieldLabel, currentValue, cell, col.name, layout)
         : null;
 }, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
+    var _a;
     const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
     if (cellType === FCellTypes.CHIP) {
         return {
@@ -1465,7 +1537,11 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     }
     if (cellType === FCellTypes.MULTI_AUTOCOMPLETE ||
         cellType === FCellTypes.MULTI_COMBOBOX) {
-        return Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null, cell)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.isEditable, id: col.name });
+        const props = Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter).call(this, cell.options, col.title, null, cell)), { showDropDownIcon: true, class: '', style: { width: '100%' }, disabled: !cell.isEditable, id: col.name });
+        if ((_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a['kup-text-field']) {
+            props.data['kup-text-field'].labelHelper = col.helper;
+        }
+        return props;
     }
     return null;
 }, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(_options, _fieldLabel, currentValue, cell) {
@@ -1489,8 +1565,8 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
     cell.data.onClick = () => {
         __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_getFunctionOnClickBTN).call(this, cell, id);
     };
-    if (cell.data.BtnMap) {
-        const concurrentCommand = (_b = (_a = this.data.setup) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.find((command) => command.obj.k === cell.data.BtnMap);
+    if (cell.data.mappedCommandId) {
+        const concurrentCommand = (_b = (_a = this.data.setup) === null || _a === void 0 ? void 0 : _a.commands) === null || _b === void 0 ? void 0 : _b.find((command) => command.obj.k === cell.data.mappedCommandId);
         if (concurrentCommand) {
             cell.isEditable = true;
             cell.data.onClick = () => {
@@ -1591,8 +1667,6 @@ _KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_formRef = new WeakMap(
         leadingLabel: fieldLabel || '',
         value: currentValue || '',
     };
-}, _KupInputPanel_FileUploadAdapter = function _KupInputPanel_FileUploadAdapter(_options, _fieldLabel, currentValue, cell) {
-    return Object.assign({ pathString: currentValue }, cell.data);
 }, _KupInputPanel_TimeAdapter = function _KupInputPanel_TimeAdapter(_options, fieldLabel, currentValue) {
     return {
         data: {