@sme.up/ketchup 10.3.6 → 10.3.7

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

@@ -328,12 +328,14 @@ export class KupCombobox {
                 : false,
             showMarker: this.showMarker,
             legacyLook: this.legacyLook,
-            size: getSizeOfInputElement(this.data, this.displayMode, this.size),
+            size: this.size
+                ? this.size
+                : getSizeOfInputElement(this.data, this.displayMode, this.size),
             title: (_a = this.displayedValue) !== null && _a !== void 0 ? _a : '',
         };
         const fullHeight = this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
-        return (h(Host, { key: 'b419cdf58d190601c58d0ab1501e6cfeeb215c4f', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: '9c5b4ad2ae9303e607ab0667cd31d2fe95f50524' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '759809bb42d7f30abdcb5db1abb4a0e5689fc731', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: '9e864b76be8ad6602186797f68d237980ebd307d' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
+        return (h(Host, { key: '8bb8eace416a6799a32f5d5222759ead3525ed7d', class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h("style", { key: 'bf9817caafcbd303719c862f4f84111ef6da27c1' }, __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '1052268f4d6e8227b3fdc6c6a25ea2004f21d197', id: componentWrapperId, style: __classPrivateFieldGet(this, _KupCombobox_elStyle, "f") }, h(FTextField, Object.assign({ key: 'df2cf6672cfe3c9360476df936cedff6449861b6' }, props, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, trailingIcon: true, icon: this.showDropDownIcon
                 ? KupThemeIconValues.DROPDOWN
                 : null, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupIconClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => this.onKupInput(), onIconClick: () => this.onKupIconClick(), onClearIconClick: () => this.onKupClearIconClick() }))), __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_prepList).call(this)));
     }

package/dist/collection/components/kup-data-table/kup-data-table-declarations.js

@@ -67,6 +67,7 @@ export var KupDataTableProps;
     KupDataTableProps["transpose"] = "Transposes the data of the data table.";
     KupDataTableProps["updatableData"] = "When set to true, editable cells will be rendered using input components and update button will appair below the matrix";
     KupDataTableProps["updateOnClick"] = "When set to true, editable checkbox will call update";
+    KupDataTableProps["visibleColumns"] = "Defines the columns that are visible in the table";
 })(KupDataTableProps || (KupDataTableProps = {}));
 export var SortMode;
 (function (SortMode) {

package/dist/collection/components/kup-data-table/kup-data-table.css

@@ -669,7 +669,7 @@ th.obj:hover span:not(.overlay-action) {
   mask: var(--kup-key-icon);
 }
 
-@media (max-width: 678px) {
+@media (max-width: 830px) {
   .actions-wrapper {
     flex-direction: column-reverse;
   }
@@ -718,6 +718,7 @@ th.obj:hover span:not(.overlay-action) {
 
 .paginator-tabs {
   width: 100%;
+  display: flex;
 }
 .paginator-tabs kup-paginator {
   display: inline-flex;
@@ -729,13 +730,15 @@ th.obj:hover span:not(.overlay-action) {
   float: right;
 }
 
+@media (max-width: 830px) {
+  .above-wrapper.paginator-top {
+    border-bottom: 1px solid var(--kup-border-subtle);
+  }
+}
 @media (max-width: 500px) {
   .paginator-wrapper {
     min-width: fit-content;
   }
-  .above-wrapper.paginator-top {
-    border-bottom: 1px solid var(--kup-border-subtle);
-  }
 }
 sticky-header {
   display: none;

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -441,7 +441,7 @@ export class KupDataTable {
     computeMaxRowsPerPage() {
         var _a, _b, _c, _d;
         if (((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.rows) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-            const columnsNumber = this.data.columns.length;
+            const columnsNumber = this.getVisibleColumns().length;
             const rowsNumber = this.data.rows.length;
             const perfTuning = __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").perfTuning;
             perfTuning.maxRowsPerPageProvider(columnsNumber, rowsNumber, (maxRows) => {
@@ -1441,7 +1441,7 @@ export class KupDataTable {
         __classPrivateFieldSet(this, _KupDataTable_sizedColumns, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getSizedColumns).call(this), "f");
         let rows = null;
         if (__classPrivateFieldGet(this, _KupDataTable_paginatedRowsLength, "f") === 0) {
-            rows = (h("tr", { key: '07ec46c9a424095e068b11ec69c3a174c367e71f', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '0815316e29d0de0c08707ab2884c154e9fcfd842', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
+            rows = (h("tr", { key: '65b3fb40eaad33e6d3c3bcb8f160b69856ecf701', ref: (el) => __classPrivateFieldGet(this, _KupDataTable_rowsRefs, "f").push(el) }, h("td", { key: '5e670d0765de2341365a739bc3f825e78721ac25', colSpan: __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_calculateColspan).call(this) }, this.emptyDataLabel)));
         }
         else {
             rows = [];
@@ -1517,7 +1517,7 @@ export class KupDataTable {
                         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_handleChipsContextMenu).call(this, chipArg.id, e);
                     });
                 }
-                groupChips = h(FChip, Object.assign({ key: 'b9787d6ffd1c934371490794b42cdfdea1c01038' }, props));
+                groupChips = h(FChip, Object.assign({ key: '5b8732380a56359aef620c40b29c64159570f9d9' }, props));
             }
         }
         const tableClass = {
@@ -1549,7 +1549,7 @@ export class KupDataTable {
         if (this.headerIsPersistent &&
             this.tableHeight === undefined &&
             this.tableWidth === undefined) {
-            stickyEl = (h("sticky-header", { key: 'b39ba6e2f3d690191289485213c40b332b1d26b5', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: 'b0a7cd9c667abc832d623bf50b59ca5805f27201' }, h("tr-sticky", { key: 'b6d8cba262f07d876f155e8e9aab2513b1ab87a1' }, stickyHeader))));
+            stickyEl = (h("sticky-header", { key: 'f4209dc154f69639a46e566999616b493caed499', class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_stickyTheadRef, el, "f")) }, h("thead-sticky", { key: 'de05e2fbcb98a9d1beaf6a9ae903219398d80478' }, h("tr-sticky", { key: 'd4df92b29c1a2328f1095e852fee3a98495ef33c' }, stickyHeader))));
         }
         let belowClass = 'below-wrapper';
         if (!!this.tableHeight || !!this.tableWidth) {
@@ -1595,7 +1595,7 @@ export class KupDataTable {
         const useGlobalFilter = !this.legacyLook &&
             (this.globalFilter ||
                 this.getRows().length > __classPrivateFieldGet(this, _KupDataTable_DEFAULT_ROWS_FOR_GLOBAL_FILTER, "f"));
-        const compCreated = (h(Host, { key: 'dae64eb7127e6224a3e70901fd95ab5e01184637', "onKup-drop": (e) => {
+        const compCreated = (h(Host, { key: '9a17685f40d632c7cb18a342236f99f96825120d', "onKup-drop": (e) => {
                 this.kupDataTableDrop.emit(e.detail);
             }, "onKup-cell-input": (e) => {
                 autoselectOnAction(e);
@@ -1610,11 +1610,11 @@ export class KupDataTable {
                 this.kupDataTableObjectFieldOpenSearchMenu.emit(e.detail);
             }, "onKup-objectfield-selectedmenuitem": (e) => {
                 this.kupDataTableObjectFieldSelectedMenuItem.emit(e.detail);
-            } }, h("style", { key: 'eb3cf7aad6a0000d4392fae00b54cd2e55c45b1e' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: 'b5cf011078c5cb66c3ea0e35d56876321db2d741', id: componentWrapperId, class: wrapClass }, h("div", { key: '3eee618cb47ea8dfffa99d579539a77399821d8b', class: "group-wrapper" }, groupChips), h("div", { key: '9cdd14af5170a3db5ae3ee9a9cba45b41443100a', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
+            } }, h("style", { key: '79ace6176b404970802c44e116bfe85eb4f97585' }, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), this.updatableData ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_renderUpdateButtons).call(this) : null, h("div", { key: '351cd4f3fa636ae8aac9b789ab5ddf2161b17942', id: componentWrapperId, class: wrapClass }, h("div", { key: '32ec90f3dc78d10462e5e5ef8a4ef0684cdcff36', class: "group-wrapper" }, groupChips), h("div", { key: '41c4515d9d59078f867aa638cdd3b9ea0f157d45', class: "actions-wrapper", style: actionWrapperWidth }, useGlobalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), sizing: KupComponentSizing.EXTRA_SMALL, value: this.globalFilterValue, onInput: (event) => {
                 const t = event.target;
                 window.clearTimeout(__classPrivateFieldGet(this, _KupDataTable_globalFilterTimeout, "f"));
                 __classPrivateFieldSet(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
-            } }))) : null, h("div", { key: '738986c7da7d958e11d20a888879fe88990c6661', class: "above-wrapper paginator-top" }, paginatorTop), this.insertMode !== '' &&
+            } }))) : null, paginatorTop && (h("div", { key: 'cabedeb68bcfe2cf6a99deff4d591a9a9ee29bb3', class: "above-wrapper paginator-top" }, paginatorTop)), this.insertMode !== '' &&
             this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
                 this.kupSave.emit({
                     comp: this,
@@ -1664,9 +1664,9 @@ export class KupDataTable {
                     this.data.rows.unshift(row);
                     await this.refresh(true);
                 }
-            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: 'bc2478aff69fa98876ff08b2f4fff283fead57ee', class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+            }, sizing: KupComponentSizing.MEDIUM, styling: FButtonStyling.RAISED, title: "Insert row", wrapperClass: "insert-button" })) : null), h("div", { key: 'eb03546e0494b0185762bcbef91938c67fb67f71', class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
             ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
-            : null), h("div", { key: 'e638d996e1824aa362f60000451fdeb522422593', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
+            : null), h("div", { key: '1c23ebbebedf9b71f1774dc9a719a814ae2d9342', style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
             ? [
                 h("div", { class: "settings-trigger", onClick: () => {
                         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onCustomSettingsClick).call(this);
@@ -1675,7 +1675,7 @@ export class KupDataTable {
                     } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
                 this.renderCustomizePanel(),
             ]
-            : null, h("table", { key: '9170bbb26e1a0d1e9e18668df90edc9324271e15', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
+            : null, h("table", { key: '0c641583cbf04c513aa98d0dce01ca6d9b8c011c', class: tableClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableRef, el, "f")), onKeyDown: (e) => __classPrivateFieldGet(this, _KupDataTable_onKupKeyDown, "f").call(this, e), onMouseLeave: (ev) => {
                 ev.stopPropagation();
             }, onPointerDown: (e) => {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
@@ -1683,7 +1683,7 @@ export class KupDataTable {
                 __classPrivateFieldSet(this, _KupDataTable_lastPointerDetails, __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_getEventDetails).call(this, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").getEventPath(e.target, this.rootElement), e), "f");
             }, onContextMenu: (e) => {
                 e.preventDefault();
-            } }, h("thead", { key: 'f5712e5ee848bd8500bb3ba4db462c67690a51bd', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: 'f31395dd72d13b0ae9746db64fa2505dad92c083' }, header)), h("tbody", { key: '084950706c42cb528f9e8eb1ab38f8bcd96e8417' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
+            } }, h("thead", { key: '19ba63a8356e15878207df1c167825c7089dcb43', hidden: !this.showHeader, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_theadRef, el, "f")) }, h("tr", { key: '14477c0152f8a5dc08c6ca4adbff833c6f04713a' }, header)), h("tbody", { key: '1a91bb716cea4d295c659e30006385ac3c0081d6' }, rows), this.showFooter && this.renderFooter()), stickyEl), paginatorBottom)));
         __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").perfMonitoring.measure('componentRender', 'kup-data-table');
         return compCreated;
     }
@@ -4406,6 +4406,9 @@ export class KupDataTable {
             }, {
                 "propName": "data",
                 "methodName": "computeMaxRowsPerPage"
+            }, {
+                "propName": "visibleColumns",
+                "methodName": "computeMaxRowsPerPage"
             }, {
                 "propName": "groups",
                 "methodName": "recalculateRowsAndUndoSelections"

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _KupEchart_candleChart, _KupEchart_calendarChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_createYWithColumnTitle, _KupEchart_createYForPie, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
+var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _KupEchart_candleChart, _KupEchart_calendarChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_createYWithColumnTitle, _KupEchart_createYForPie, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_buildResponsiveAxisLabel, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
 import { forceUpdate, getAssetPath, Host, h, } from "@stencil/core";
 import * as echarts from "echarts";
 import { KupEchartLegendPlacement, KupEchartMaps, KupEchartProps, KupEchartTypes, } from "./kup-echart-declarations";
@@ -142,7 +142,7 @@ export class KupEchart {
             '--kup_echart_height': this.sizeY ? this.sizeY : '100%',
             '--kup_echart_width': this.sizeX ? this.sizeX : '100%',
         };
-        return (h(Host, { key: '54172a06b4c9fa2b4b14aa2cedf1002ee6ba535c', style: style }, h("style", { key: 'c88e6cd2781d7bf5a9d0fbb2ce6f95b3da037bbf' }, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd6464aff5fcaa909b91b642b5c22d2115f474fd4', id: componentWrapperId, ref: (chartContainer) => (__classPrivateFieldSet(this, _KupEchart_chartContainer, chartContainer, "f")) })));
+        return (h(Host, { key: '6695df3d157839e237b73df89f56dd438240739a', style: style }, h("style", { key: 'f645db394d2d0fc02d027e7958eaf9266be71a1d' }, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '8cc220551d3cee74babf45104cfa3409b2107ec1', id: componentWrapperId, ref: (chartContainer) => (__classPrivateFieldSet(this, _KupEchart_chartContainer, chartContainer, "f")) })));
     }
     disconnectedCallback() {
         var _a;
@@ -1823,6 +1823,50 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
             });
             break;
     }
+}, _KupEchart_buildResponsiveAxisLabel = function _KupEchart_buildResponsiveAxisLabel(x, pxPerChr = 7) {
+    const rootH = this.rootElement.clientHeight;
+    const rootW = this.rootElement.clientWidth;
+    const slots = x.length; // number of categories
+    const slotW = Math.max(rootW / slots, 1); // px available per label
+    const longestChr = Math.max(...x.map((l) => l.length));
+    const longestPx = longestChr * pxPerChr; // rough pixel length
+    const fitsFlat = longestPx <= slotW * 0.9;
+    if (fitsFlat) {
+        return { interval: 0, rotate: 0 };
+    }
+    let charLimit = 0;
+    if (rootH < 200) {
+        charLimit = 10;
+    }
+    else if (rootH < 400) {
+        charLimit = 15;
+    }
+    else if (rootW < 400) {
+        charLimit = 15;
+    }
+    else if (rootW < 600) {
+        charLimit = 20;
+    }
+    else if (rootW < 800) {
+        charLimit = 30;
+    }
+    else {
+        charLimit = 40;
+    }
+    const toolong = longestChr > charLimit;
+    if (!toolong) {
+        const fitsTilt = longestPx <= slotW * 1.4;
+        if (fitsTilt) {
+            return { interval: 0, rotate: 22.5 };
+        }
+    }
+    const clampW = Math.max(Math.floor(rootW / charLimit), 1);
+    return {
+        interval: 0,
+        rotate: 22.5,
+        width: clampW,
+        overflow: 'truncate',
+    };
 }, _KupEchart_setOptions = function _KupEchart_setOptions() {
     var _a;
     const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
@@ -1881,9 +1925,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
         tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (params) => {
                 return `<b>${params.name}</b><br/>${params.seriesName}: <b>${params.value}</b>`;
             } }),
-        xAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: isHorizontal ? undefined : x, type: isHorizontal ? 'value' : 'category', axisLabel: {
-                formatter: axisLabelFormatter,
-            } }), this.xAxis),
+        xAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: isHorizontal ? undefined : x, type: isHorizontal ? 'value' : 'category', axisLabel: Object.assign({ formatter: axisLabelFormatter }, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_buildResponsiveAxisLabel).call(this, x)) }), this.xAxis),
         yAxis,
         grid: { show: true, containLabel: true },
     };

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

@@ -1,5 +1,7 @@
 export var KupFileUploadProps;
 (function (KupFileUploadProps) {
     KupFileUploadProps["customStyle"] = "Custom style of the component.";
-    KupFileUploadProps["data"] = "Actual data of the input file upload.";
+    KupFileUploadProps["pathString"] = "The initial filepaths.";
+    KupFileUploadProps["FupMul"] = "Sets the multiple upload.";
+    KupFileUploadProps["FupAut"] = "Sets the auto upload of select file";
 })(KupFileUploadProps || (KupFileUploadProps = {}));

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

@@ -133,6 +133,7 @@
     var(--kup-gray-color-30)
   );
   flex: 1;
+  min-width: 360px;
 }
 :host .file-upload-spinner > * {
   opacity: 0.6;
@@ -161,6 +162,18 @@
   margin: auto;
   width: 48px;
 }
+:host .file-upload__error {
+  display: flex;
+  justify-content: center;
+}
+:host .file-upload__error .mdc-error-message {
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-label-01-font-size, 12px);
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  color: var(--kup-danger-color-60);
+}
 :host .file-upload__list {
   display: flex;
   flex-direction: column;

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

@@ -6,7 +6,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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;
-import { forceUpdate, Host, h, } from "@stencil/core";
+import { forceUpdate, Host, h, Fragment, } from "@stencil/core";
 import { kupManagerInstance } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { KupFileUploadProps, } from "./kup-file-upload-declarations";
@@ -38,18 +38,36 @@ export class KupFileUpload {
             ],
         ]));
         this.customStyle = '';
-        this.data = null;
+        this.pathString = null;
+        this.FupMul = 'false';
+        this.FupAut = 'false';
+        this.FupDir = null;
+        this.error = undefined;
         this.inputRef = undefined;
-        this.files = [];
+        this.tempFiles = [];
+        this.pathFiles = [];
         this.uploadSuccess = false;
         this.showSpinner = false;
+        this.multiUpload = false;
+        this.autoUpload = false;
     }
     //#endregion
     //#region WATCHERS
     /*-------------------------------------------------*/
     /*                  W a t c h e r s                */
     /*-------------------------------------------------*/
-    onDataChanged() { }
+    onDataChanged() {
+        var _a;
+        this.uploadSuccess = false;
+        __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleCancel).call(this);
+        this.pathFiles = ((_a = this.pathString) === null || _a === void 0 ? void 0 : _a.split(';')) || [];
+    }
+    onFupMulChanged() {
+        this.multiUpload = this.FupMul === 'true';
+    }
+    onFupAutChanged() {
+        this.autoUpload = this.FupAut === 'true';
+    }
     //#endregion
     //#region PUBLIC METHODS
     /*-------------------------------------------------*/
@@ -80,11 +98,19 @@ export class KupFileUpload {
      * Sets upload has been successfull to show success message.
      * @param {boolean} success - Boolean to set if upload has been successfull.
      */
-    async setSuccess(success) {
+    async setSuccess(success, pathFiles) {
         this.setLoading(false);
-        if (success) {
+        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]];
+            this.kupChange.emit({
+                comp: this,
+                id: this.rootElement.id,
+                value: this.pathFiles.join(';'),
+            });
         }
     }
     /**
@@ -103,6 +129,8 @@ export class KupFileUpload {
         __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';
     }
     componentDidLoad() {
         this.kupReady.emit({ comp: this, id: this.rootElement.id });
@@ -115,10 +143,10 @@ export class KupFileUpload {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'c1d2c71efa28c233051bdfeb1535bcb07149c660' }, h("style", { key: '9fb2a5e633f49bac0fe1c8673869ac8b29c1272b' }, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'b43469650151abf962aba80f54e15343c2a95767', id: componentWrapperId }, h("div", { key: '18489f11209ad6cf55c2de3e232b2b0888a4f505', class: {
+        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: {
                 '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: '8a700a42c034d2604bfe84199212123dd082c64a', type: "file", ref: (el) => (this.inputRef = el), onChange: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleFileChange).bind(this), multiple: true, hidden: true }), h("div", { key: '5279ca7bbb0468519c8cb4ae223c0d4e1e6dc7a5', class: "file-upload__buttons" }, h(FButton, { key: '76b00cac757d67e629a043f123217cdbc0b3dc58', icon: "upload", label: __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageGeneric.CHOOSE), onClick: __classPrivateFieldGet(this, _KupFileUpload_instances, "m", _KupFileUpload_handleClick).bind(this) }), h(FButton, { key: 'ddec08321006f92257b336530f168cbabcdb0796', icon: "save", disabled: !this.files.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: '1e70cb49c36286d5e72dd412b776c9002194102e', icon: "clear", disabled: !this.files.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.uploadSuccess ? (h("span", null, __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.translate(KupLanguageUpload.SUCCESS))) : (h("div", { class: "file-upload__list" }, this.files.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) })), 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.showSpinner && (h("div", { key: 'f6a8de73c3109a9067866628f78698150bc83bdc', class: "file-upload__spinner-container" }, h("kup-spinner", { key: 'ca00b8efcae2be30f8ea5028d6c2a7e3839d63a4', active: true, layout: 14, dimensions: "7px" })))))));
+            }, 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" })))))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFileUpload_kupManager, "f").language.unregister(this);
@@ -162,12 +190,75 @@ export class KupFileUpload {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "data": {
-                "type": "any",
+            "pathString": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The initial filepaths"
+                },
+                "attribute": "path-string",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "FupMul": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Sets the multiple upload"
+                },
+                "attribute": "fup-mul",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "FupAut": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Sets the auto upload of select file"
+                },
+                "attribute": "fup-aut",
+                "reflect": false,
+                "defaultValue": "'false'"
+            },
+            "FupDir": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -177,20 +268,44 @@ export class KupFileUpload {
                             "name": "default",
                             "text": "null"
                         }],
-                    "text": "Actual data of the input field."
+                    "text": "Sets the custom dir to upload files"
                 },
-                "attribute": "data",
+                "attribute": "fup-dir",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'false'"
+                        }],
+                    "text": "Error string to render in component"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "undefined"
             }
         };
     }
     static get states() {
         return {
             "inputRef": {},
-            "files": {},
+            "tempFiles": {},
+            "pathFiles": {},
             "uploadSuccess": {},
-            "showSpinner": {}
+            "showSpinner": {},
+            "multiUpload": {},
+            "autoUpload": {}
         };
     }
     static get events() {
@@ -236,6 +351,27 @@ export class KupFileUpload {
                         }
                     }
                 }
+            }, {
+                "method": "kupChange",
+                "name": "kup-file-upload-change",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupFileUploadChangeEventPayload",
+                    "resolved": "KupFileUploadChangeEventPayload",
+                    "references": {
+                        "KupFileUploadChangeEventPayload": {
+                            "location": "import",
+                            "path": "./kup-file-upload-declarations",
+                            "id": "src/components/kup-file-upload/kup-file-upload-declarations.ts::KupFileUploadChangeEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -320,11 +456,15 @@ export class KupFileUpload {
             },
             "setSuccess": {
                 "complexType": {
-                    "signature": "(success: boolean) => Promise<void>",
+                    "signature": "(success: boolean, pathFiles: string) => Promise<void>",
                     "parameters": [{
                             "name": "success",
                             "type": "boolean",
                             "docs": "- Boolean to set if upload has been successfull."
+                        }, {
+                            "name": "pathFiles",
+                            "type": "string",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -371,8 +511,14 @@ export class KupFileUpload {
     static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{
-                "propName": "data",
+                "propName": "pathString",
                 "methodName": "onDataChanged"
+            }, {
+                "propName": "FupMul",
+                "methodName": "onFupMulChanged"
+            }, {
+                "propName": "FupAut",
+                "methodName": "onFupAutChanged"
             }];
     }
 }
@@ -380,12 +526,22 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     this.inputRef.click();
 }, _KupFileUpload_handleFileChange = function _KupFileUpload_handleFileChange(event) {
     this.uploadSuccess = false;
+    this.error = '';
     const newFiles = Array.from(event.target.files);
-    this.files = [...this.files, ...newFiles];
+    this.tempFiles = [...this.tempFiles, ...newFiles];
+    this.inputRef.value = '';
+    if (this.autoUpload) {
+        this.kupUpload.emit({
+            comp: this,
+            id: this.rootElement.id,
+            files: this.tempFiles,
+        });
+        this.setLoading(true);
+    }
 }, _KupFileUpload_handleFileRemove = function _KupFileUpload_handleFileRemove(index) {
-    this.files = [
-        ...this.files.splice(0, index),
-        ...this.files.splice(index + 1),
+    this.tempFiles = [
+        ...this.tempFiles.splice(0, index),
+        ...this.tempFiles.splice(index + 1),
     ];
 }, _KupFileUpload_handleDrop = function _KupFileUpload_handleDrop(event) {
     event.preventDefault();
@@ -393,10 +549,10 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     const droppedFiles = event.dataTransfer.files;
     if (droppedFiles.length > 0) {
         const newFiles = Array.from(droppedFiles);
-        this.files = [...this.files, ...newFiles];
+        this.tempFiles = [...this.tempFiles, ...newFiles];
     }
 }, _KupFileUpload_handleCancel = function _KupFileUpload_handleCancel() {
-    this.files = [];
+    this.tempFiles = [];
 }, _KupFileUpload_getPreview = function _KupFileUpload_getPreview(file) {
     const previewIcon = __classPrivateFieldGet(this, _KupFileUpload_previewMap, "f").get(file.type);
     if (!previewIcon) {
@@ -418,7 +574,7 @@ _KupFileUpload_kupManager = new WeakMap(), _KupFileUpload_previewMap = new WeakM
     this.kupUpload.emit({
         comp: this,
         id: this.rootElement.id,
-        files: this.files,
+        files: this.tempFiles,
     });
     this.setLoading(true);
 };