@sme.up/ketchup 8.2.0 → 8.2.2

package/dist/collection/assets/echart.js

@@ -6,6 +6,7 @@ const echart5 = document.getElementById('gaussian2chart');
 const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
 const echart8 = document.getElementById('bubbleChart');
+const echart9 = document.getElementById('sankeyChart');
 
 const mockData = {
     columns: [
@@ -790,10 +791,9 @@ echart7.data = {
     ],
 };
 
-
 echart8.consistencyCheck = true;
 echart8.types = ['Bubble'];
-echart8.colors =  ['blue'];
+echart8.colors = ['blue'];
 echart8.axis = '';
 echart8.chartTitle = {
     value: 'Bubble',
@@ -822,7 +822,7 @@ echart8.data = {
         {
             name: 'YEAR',
             title: 'Year',
-        }
+        },
     ],
     rows: [
         {
@@ -961,8 +961,150 @@ echart8.data = {
                 },
             },
         },
-    ]
+    ],
+};
 
+echart9.consistencyCheck = true;
+echart9.types = ['Sankey'];
+echart9.colors = ['blue'];
+echart9.axis = '';
+echart9.chartTitle = {
+    value: 'Sankey',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart9.data = {
+    // actual dataset
+    columns: [
+        {
+            name: 'SOURCE',
+            title: 'Source',
+        },
+        {
+            name: 'TARGET',
+            title: 'Target',
+        },
+        {
+            name: 'VALUE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Value',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '5',
+                    },
+                    value: '5',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a2',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '8',
+                    },
+                    value: '8',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1',
+                    },
+                    value: '1',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'c',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '2',
+                    },
+                    value: '2',
+                },
+            },
+        },
+    ],
 };
 
 document.addEventListener('kup-echart-click', (e) => {

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

@@ -1156,7 +1156,7 @@ export class KupBox {
         } })));
     }
     let paginator = null;
-    if (this.pagination) {
+    if (!this.lazyLoadRows && this.pagination) {
       paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
           : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));

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

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

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

@@ -50,4 +50,5 @@ export var KupEchartTypes;
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
+  KupEchartTypes["SANKEY"] = "Sankey";
 })(KupEchartTypes || (KupEchartTypes = {}));

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_createX, _KupEchart_createY, _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_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _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';
@@ -655,6 +655,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.BUBBLE:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
       break;
+    case KupEchartTypes.SANKEY:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -792,13 +795,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
 }, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
   const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
   let year = [];
-  const content = this.data.columns.map(data => data.title);
+  const content = this.data.columns.map((data) => data.title);
   if (content && content.length) {
     for (let i = 0; i < y[content[0]].length; i++) {
       const arr = [];
       for (let j = 0; j < content.length; j++) {
         arr.push(y[content[j]][i]);
-        // last value always be a year 
+        // last value always be a year
         if (j === content.length - 1) {
           year.push(y[content[j]][i]);
         }
@@ -809,7 +812,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   year = [...new Set(year)];
   year.forEach((e, i) => {
     let k = [];
-    temp.forEach(data => {
+    temp.forEach((data) => {
       if (data.includes(e))
         k.push(data);
     });
@@ -831,9 +834,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           formatter: function (param) {
             return param.data[3];
           },
-          position: 'top'
-        }
-      }
+          position: 'top',
+        },
+      },
     });
   });
   return {
@@ -845,7 +848,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           return `<li>  ${e}: ${name[i]} </li>`;
         });
         let showContent = '';
-        data.forEach(r => {
+        data.forEach((r) => {
           showContent += r;
         });
         return `<ul>${showContent}</ul> `;
@@ -853,20 +856,56 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     xAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
-      }
+          type: 'dashed',
+        },
+      },
     },
     yAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
+          type: 'dashed',
+        },
       },
-      scale: true
+      scale: true,
     },
     color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
-    series: series
+    series: series,
+  };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+  // Assuming all arrays in the question object have the same length
+  const arrayLength = y[keys[0]].length;
+  for (let i = 0; i < arrayLength; i++) {
+    const entry = {};
+    entry['source'] = y[keys[0]][i];
+    entry['target'] = y[keys[1]][i];
+    entry['value'] = parseInt(y[keys[2]][i]);
+    links.push(entry);
+  }
+  const data = Array.from(new Set([
+    ...links.map((link) => link.source),
+    ...links.map((link) => link.target),
+  ])).map((name) => ({ name }));
+  const legend = {};
+  data.forEach((e, i) => {
+    legend[e.name] = i;
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      emphasis: {
+        focus: 'adjacency',
+      },
+      data,
+      links,
+      right: '10%',
+      left: '10%',
+    },
   };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];

package/dist/collection/components/kup-text-field/kup-text-field-declarations.js

@@ -14,6 +14,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
+  KupTextFieldProps["hiddenCounter"] = "Hides the character counter.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";
@@ -28,6 +29,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
+  KupTextFieldProps["size"] = "The HTML attribute size of the input element.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";
   KupTextFieldProps["textArea"] = "When set to true, the component will be rendered as a textarea.";
   KupTextFieldProps["trailingIcon"] = "When set, the icon will be shown after the text.";

package/dist/collection/components/kup-text-field/kup-text-field.js

@@ -32,6 +32,7 @@ export class KupTextField {
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
+    this.hiddenCounter = false;
     this.icon = null;
     this.initialValue = '';
     this.inputMode = null;
@@ -46,6 +47,7 @@ export class KupTextField {
     this.name = null;
     this.outlined = false;
     this.readOnly = false;
+    this.size = null;
     this.step = null;
     this.textArea = false;
     this.trailingIcon = false;
@@ -221,6 +223,7 @@ export class KupTextField {
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
+      hiddenCounter: this.hiddenCounter,
       icon: this.icon,
       info: this.rootElement.classList.contains('kup-info')
         ? true
@@ -243,6 +246,7 @@ export class KupTextField {
       shaped: this.rootElement.classList.contains('kup-shaped')
         ? true
         : false,
+      size: this.size,
       step: this.step,
       success: this.rootElement.classList.contains('kup-success')
         ? true
@@ -495,6 +499,27 @@ export class KupTextField {
         "reflect": false,
         "defaultValue": "false"
       },
+      "hiddenCounter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Hides the character counter."
+        },
+        "attribute": "hidden-counter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -789,6 +814,27 @@ export class KupTextField {
         "reflect": false,
         "defaultValue": "false"
       },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "The HTML attribute size of the input element."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "step": {
         "type": "number",
         "mutable": false,

package/dist/collection/f-components/f-cell/f-cell.js

@@ -104,7 +104,7 @@ export const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+    }, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
     ? children
     : [props.indents, infoEl, icon, content])));
 };
@@ -236,7 +236,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             ? cell.icon
             : column.icon
               ? column.icon
-              : null, value: cellType === FCellTypes.NUMBER
+              : null, value: cellType === FCellTypes.NUMBER && cell.value
           ? dom.ketchup.math
             .numberifySafe(cell.value)
             .toString()

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -67,7 +67,7 @@ function setContent(props) {
   }
   return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)) : undefined, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
       ? props.label
-      : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
+      : undefined, maxlength: props.maxLength, size: props.size, value: value, onBlur: (e) => {
       var _a;
       if (persManageForNumberFormat) {
         const options = {
@@ -130,10 +130,14 @@ function setHelper(props) {
         'mdc-text-field-helper-text': true,
         'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
       };
-      return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
+      return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
     }
     else {
-      if (props.maxLength && !props.textArea) {
+      if (props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea) {
         return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)));
       }
     }

package/dist/components/kup-autocomplete2.js

@@ -19834,7 +19834,7 @@ function setContent(props) {
     props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
       h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
         ? props.label
-        : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
+        : undefined, maxlength: props.maxLength, size: props.size, value: value, onBlur: (e) => {
         var _a;
         if (persManageForNumberFormat) {
           const options = {
@@ -19906,12 +19906,16 @@ function setHelper(props) {
       };
       return (h("div", { class: "mdc-text-field-helper-line" },
         h("div", { class: classObj }, props.helper),
-        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
+        props.hiddenCounter !== true &&
+          props.maxLength &&
+          !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
           "'0 / ' + ",
           props.maxLength.toString())) : undefined));
     }
     else {
-      if (props.maxLength && !props.textArea) {
+      if (props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea) {
         return (h("div", { class: "mdc-text-field-helper-line" },
           h("div", { class: "mdc-text-field-character-counter" },
             "'0 / ' + ",
@@ -23097,7 +23101,7 @@ const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style },
+    }, ref: (el) => (cell.element = el), style: cell.style },
     h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
       ? children
       : [props.indents, infoEl, icon, content])));
@@ -23233,7 +23237,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             ? cell.icon
             : column.icon
               ? column.icon
-              : null, value: cellType === FCellTypes.NUMBER
+              : null, value: cellType === FCellTypes.NUMBER && cell.value
           ? dom$e.ketchup.math
             .numberifySafe(cell.value)
             .toString()
@@ -29172,8 +29176,8 @@ class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';
@@ -31103,6 +31107,7 @@ var KupTextFieldProps;
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
+  KupTextFieldProps["hiddenCounter"] = "Hides the character counter.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";
@@ -31117,6 +31122,7 @@ var KupTextFieldProps;
   KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
+  KupTextFieldProps["size"] = "The HTML attribute size of the input element.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";
   KupTextFieldProps["textArea"] = "When set to true, the component will be rendered as a textarea.";
   KupTextFieldProps["trailingIcon"] = "When set, the icon will be shown after the text.";
@@ -33431,6 +33437,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
+    this.hiddenCounter = false;
     this.icon = null;
     this.initialValue = '';
     this.inputMode = null;
@@ -33445,6 +33452,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     this.name = null;
     this.outlined = false;
     this.readOnly = false;
+    this.size = null;
     this.step = null;
     this.textArea = false;
     this.trailingIcon = false;
@@ -33613,6 +33621,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
+      hiddenCounter: this.hiddenCounter,
       icon: this.icon,
       info: this.rootElement.classList.contains('kup-info')
         ? true
@@ -33635,6 +33644,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
       shaped: this.rootElement.classList.contains('kup-shaped')
         ? true
         : false,
+      size: this.size,
       step: this.step,
       success: this.rootElement.classList.contains('kup-success')
         ? true
@@ -33673,6 +33683,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     "helper": [1],
     "helperEnabled": [4, "helper-enabled"],
     "helperWhenFocused": [4, "helper-when-focused"],
+    "hiddenCounter": [4, "hidden-counter"],
     "icon": [1],
     "initialValue": [1, "initial-value"],
     "inputMode": [1, "input-mode"],
@@ -33687,6 +33698,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     "name": [1],
     "outlined": [4],
     "readOnly": [4, "read-only"],
+    "size": [2],
     "step": [2],
     "textArea": [4, "text-area"],
     "trailingIcon": [4, "trailing-icon"],

package/dist/components/kup-box2.js

@@ -1200,7 +1200,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         } })));
     }
     let paginator = null;
-    if (this.pagination) {
+    if (!this.lazyLoadRows && this.pagination) {
       paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
           : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));