@sme.up/ketchup 10.3.7 → 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";
@@ -42,25 +42,32 @@ export class KupFileUpload {
         this.FupMul = 'false';
         this.FupAut = 'false';
         this.FupDir = null;
+        this.FupAty = null;
         this.error = undefined;
         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';
@@ -68,6 +75,10 @@ export class KupFileUpload {
     onFupAutChanged() {
         this.autoUpload = this.FupAut === 'true';
     }
+    onFupFupAtyChanged() {
+        var _a;
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
+    }
     //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
@@ -102,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]];
@@ -126,11 +136,13 @@ export class KupFileUpload {
     /*          L i f e c y c l e   H o o k s          */
     /*-------------------------------------------------*/
     componentWillLoad() {
+        var _a;
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logLoad(this, false);
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.register(this);
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.register(this);
         this.multiUpload = this.FupMul === 'true';
         this.autoUpload = this.FupAut === 'true';
+        this.acceptedFiles = (_a = this.FupAty) === null || _a === void 0 ? void 0 : _a.split('|').map((ext) => `.${ext}`);
     }
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
@@ -143,10 +155,16 @@ export class KupFileUpload {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'f412a49eeb30049bdc81a66ab6337e3cfba02b81' }, h("style", { key: '00f66f5328af5e41c35576acbdc73d84b9152cfc' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '7a5f52038e5b41ed7639a2acc0db051b14c5e6e4', id: componentWrapperId }, h("div", { key: 'aff6d5be5a5ca600a1950a2195f9a26ae6f164c6', class: {
+        var _a;
+        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: '2d7d9cce86ee2dccb4183105bd2f87fbfbd8e771', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: this.multiUpload, hidden: true }), h("div", { key: 'ed2ab48eb2cb2c6cfde66c1cc3ffd82a40ec25b9', class: "file-upload__buttons" }, h(FButton, { key: '419105498c36ca6b6af5ca01d5ec7c751e593172', 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: '1b7549c1063dd8c2f17b17b1b8c59ef02937c66d' }, h(FButton, { key: 'c67ce873043022be3d1d2f7bddad747940993b2f', 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: '4c6779d87c9bf1fc272afdab69b798aedfc222fc', 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: '39033957eb653997df1241f583bb361fe424ae42', class: "file-upload__error" }, h("span", { key: 'b862700c37fac995a820c8a0e21a168486f097ae', 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: '33fae247104f72981e072659f04f7fff71e0785a', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'f86cb406e5b9476c9f37f02845b48e8b41ca191d', 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);
@@ -274,6 +292,27 @@ export class KupFileUpload {
                 "reflect": false,
                 "defaultValue": "null"
             },
+            "FupAty": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Sets the accepted extensions"
+                },
+                "attribute": "fup-aty",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "error": {
                 "type": "string",
                 "mutable": false,
@@ -287,7 +326,7 @@ export class KupFileUpload {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "'false'"
+                            "text": "'undefined'"
                         }],
                     "text": "Error string to render in component"
                 },
@@ -302,10 +341,12 @@ export class KupFileUpload {
             "inputRef": {},
             "tempFiles": {},
             "pathFiles": {},
-            "uploadSuccess": {},
             "showSpinner": {},
             "multiUpload": {},
-            "autoUpload": {}
+            "autoUpload": {},
+            "acceptedFiles": {},
+            "isValidDropFiles": {},
+            "fupError": {}
         };
     }
     static get events() {
@@ -511,6 +552,9 @@ export class KupFileUpload {
     static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
+                "propName": "error",
+                "methodName": "onErrorChange"
+            }, {
                 "propName": "pathString",
                 "methodName": "onDataChanged"
             }, {
@@ -519,17 +563,49 @@ export class KupFileUpload {
             }, {
                 "propName": "FupAut",
                 "methodName": "onFupAutChanged"
+            }, {
+                "propName": "FupAty",
+                "methodName": "onFupFupAtyChanged"
             }];
     }
 }
 _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,
@@ -538,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) {
@@ -577,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;
 }