@sme.up/ketchup 9.6.0 → 9.6.1

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

@@ -17,6 +17,9 @@ export var KupBoxProps;
     KupBoxProps["kanban"] = "Displays the boxlist as a Kanban.";
     KupBoxProps["layout"] = "How the field will be displayed. If not present, a default one will be created.";
     KupBoxProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport.";
+    KupBoxProps["loadMoreLimit"] = "Sets a maximum limit of new records which can be required by the load more functionality.";
+    KupBoxProps["loadMoreMode"] = "Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.";
+    KupBoxProps["loadMoreStep"] = "The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.";
     KupBoxProps["multiSelection"] = "Enable multi selection.";
     KupBoxProps["pageSelected"] = "Current page number.";
     KupBoxProps["pagination"] = "Enables pagination.";
@@ -24,6 +27,7 @@ export var KupBoxProps;
     KupBoxProps["scrollOnHover"] = "Activates the scroll on hover function.";
     KupBoxProps["selectBox"] = "Automatically selects the box at the specified index.";
     KupBoxProps["selectedRowsState"] = "Multiple selection.";
+    KupBoxProps["showLoadMore"] = "If set to true, displays the button to load more records.";
     KupBoxProps["showSelection"] = "If enabled, highlights the selected box/boxes.";
     KupBoxProps["sortBy"] = "If sorting is enabled, specifies which column to sort.";
     KupBoxProps["sortEnabled"] = "Enable sorting.";
@@ -31,3 +35,10 @@ export var KupBoxProps;
     KupBoxProps["store"] = "";
     KupBoxProps["swipeDisabled"] = "Disable swipe.";
 })(KupBoxProps || (KupBoxProps = {}));
+//---- *NEXT functionality AKA load more ----
+export var LoadMoreMode;
+(function (LoadMoreMode) {
+    LoadMoreMode["CONSTANT"] = "constant";
+    LoadMoreMode["CONSTANT_INCREMENT"] = "constant_increment";
+    LoadMoreMode["PROGRESSIVE_THRESHOLD"] = "progressive_threshold";
+})(LoadMoreMode || (LoadMoreMode = {}));

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

@@ -6,6 +6,8 @@ export class KupBoxState {
         this.pageSelected = 1;
         this.rowsPerPage = 0;
         this.load = false;
+        this.loadMoreLimit = 1000;
+        this.showLoadMore = false;
     }
     /*Add attribute*/
     toDebugString() {

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

@@ -14,10 +14,10 @@ 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 _KupBox_instances, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_didRenderObservers, _KupBox_setObserver;
+var _KupBox_instances, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_loadMoreEventCounter, _KupBox_loadMoreEventPreviousQuantity, _KupBox_didRenderObservers, _KupBox_setObserver, _KupBox_onLoadMoreClick;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { SortMode, } from "../kup-data-table/kup-data-table-declarations";
-import { KupBoxProps, } from "./kup-box-declarations";
+import { KupBoxProps, LoadMoreMode, } from "./kup-box-declarations";
 import { getColumnByName } from "../../utils/cell-utils";
 import { filterRows, sortRows, paginateRows, } from "../kup-data-table/kup-data-table-helper";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
@@ -32,7 +32,6 @@ import { KupThemeIconValues } from "../../managers/kup-theme/kup-theme-declarati
 import { KupDragEffect, kupDraggableAttr, KupDropEventTypes, KupPointerEventTypes, } from "../../managers/kup-interact/kup-interact-declarations";
 import { FCell } from "../../f-components/f-cell/f-cell";
 import { FPaginator } from "../../f-components/f-paginator/f-paginator";
-import { FPaginatorMode } from "../../f-components/f-paginator/f-paginator-declarations";
 import { pageChange, rowsPerPageChange, } from "../../f-components/f-paginator/f-paginator-utils";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
 export class KupBox {
@@ -58,6 +57,8 @@ export class KupBox {
         _KupBox_intObserver.set(this, undefined);
         _KupBox_rowsRefs.set(this, []);
         _KupBox_navBarHeight.set(this, 0);
+        _KupBox_loadMoreEventCounter.set(this, 0);
+        _KupBox_loadMoreEventPreviousQuantity.set(this, 0);
         this.collapsedSection = {};
         this.selectedRows = [];
         this.rowActionMenuOpened = undefined;
@@ -77,6 +78,9 @@ export class KupBox {
         this.kanban = null;
         this.layout = undefined;
         this.lazyLoadRows = false;
+        this.loadMoreLimit = 1000;
+        this.loadMoreMode = LoadMoreMode.PROGRESSIVE_THRESHOLD;
+        this.loadMoreStep = 60;
         this.multiSelection = false;
         this.pageSelected = 1;
         this.pagination = false;
@@ -84,6 +88,7 @@ export class KupBox {
         this.scrollOnHover = false;
         this.selectBox = undefined;
         this.selectedRowsState = undefined;
+        this.showLoadMore = false;
         this.showSelection = true;
         this.sortBy = undefined;
         this.sortEnabled = false;
@@ -105,6 +110,8 @@ export class KupBox {
                 this.selectedRowsState = this.state.selectedRowsState;
                 this.pageSelected = this.state.pageSelected;
                 this.rowsPerPage = this.state.rowsPerPage;
+                this.loadMoreLimit = state.loadMoreLimit;
+                this.showLoadMore = state.showLoadMore;
             }
         }
     }
@@ -135,6 +142,14 @@ export class KupBox {
                 this.state.selectedRowsState = selectedRowsState;
                 somethingChanged = true;
             }
+            if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+                this.state.loadMoreLimit = this.loadMoreLimit;
+                somethingChanged = true;
+            }
+            if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+                this.state.showLoadMore = this.showLoadMore;
+                somethingChanged = true;
+            }
             if (!this.state.load) {
                 this.state.load = true;
                 return;
@@ -1164,10 +1179,18 @@ export class KupBox {
                 } })));
         }
         let paginator = null;
-        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
+        // paginaltorPos prop not managed yet
+        const top = true;
+        if (this.showLoadMore || (!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) }));
+                    : this.rowsPerPage, onLoadMore: this.showLoadMore
+                    ? () => {
+                        __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_onLoadMoreClick).call(this);
+                    }
+                    : null, onNextPage: () => this.handlePageChange(this.currentPage + 1), onPrevPage: () => this.handlePageChange(this.currentPage - 1), onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
         }
         let boxContent = null;
         let containerStyle = {};
@@ -1531,6 +1554,78 @@ export class KupBox {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "loadMoreLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets a maximum limit of new records which can be required by the load more functionality."
+                },
+                "attribute": "load-more-limit",
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "loadMoreMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoadMoreMode",
+                    "resolved": "LoadMoreMode.CONSTANT | LoadMoreMode.CONSTANT_INCREMENT | LoadMoreMode.PROGRESSIVE_THRESHOLD",
+                    "references": {
+                        "LoadMoreMode": {
+                            "location": "import",
+                            "path": "./kup-box-declarations",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::LoadMoreMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "loadMoreStep *"
+                        }, {
+                            "name": "see",
+                            "text": "loadMoreLimit"
+                        }],
+                    "text": "Establish the modality of how many new records will be downloaded.\r\n\r\nThis property is regulated also by loadMoreStep."
+                },
+                "attribute": "load-more-mode",
+                "reflect": false,
+                "defaultValue": "LoadMoreMode.PROGRESSIVE_THRESHOLD"
+            },
+            "loadMoreStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "loadMoreMode *"
+                        }, {
+                            "name": "see",
+                            "text": "loadMoreLimit"
+                        }],
+                    "text": "The number of records which will be requested to be downloaded when clicking on the load more button.\r\n\r\nThis property is regulated also by loadMoreMode."
+                },
+                "attribute": "load-more-step",
+                "reflect": false,
+                "defaultValue": "60"
+            },
             "multiSelection": {
                 "type": "boolean",
                 "mutable": false,
@@ -1675,6 +1770,24 @@ export class KupBox {
                 "attribute": "selected-rows-state",
                 "reflect": false
             },
+            "showLoadMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, displays the button to load more records."
+                },
+                "attribute": "show-load-more",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "showSelection": {
                 "type": "boolean",
                 "mutable": false,
@@ -1977,6 +2090,27 @@ export class KupBox {
                         }
                     }
                 }
+            }, {
+                "method": "kupLoadMoreClick",
+                "name": "kup-box-loadmoreclick",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupBoxLoadMoreClickEventPayload",
+                    "resolved": "KupBoxLoadMoreClickEventPayload",
+                    "references": {
+                        "KupBoxLoadMoreClickEventPayload": {
+                            "location": "import",
+                            "path": "./kup-box-declarations",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxLoadMoreClickEventPayload"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -2131,7 +2265,7 @@ export class KupBox {
             }];
     }
 }
-_KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
+_KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_loadMoreEventCounter = new WeakMap(), _KupBox_loadMoreEventPreviousQuantity = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
     if (this.lazyLoadRows &&
         this.currentRowsPerPage < this.data.rows.length) {
         __classPrivateFieldGet(this, _KupBox_intObserver, "f").observe(__classPrivateFieldGet(this, _KupBox_rowsRefs, "f")[__classPrivateFieldGet(this, _KupBox_rowsRefs, "f").length - 1]);
@@ -2142,11 +2276,11 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
             if (entry.isIntersecting) {
                 this.kupManager.debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
                 const delta = this.data.rows.length - this.currentRowsPerPage;
-                if (delta < 10) {
+                if (delta < this.loadMoreStep) {
                     this.currentRowsPerPage += delta;
                 }
                 else {
-                    this.currentRowsPerPage += 10;
+                    this.currentRowsPerPage += this.loadMoreStep;
                 }
                 entry.target.classList.remove('last-row');
                 __classPrivateFieldGet(this, _KupBox_intObserver, "f").unobserve(entry.target);
@@ -2158,4 +2292,30 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
         rootMargin: '-' + __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + 'px 0px 0px 0px',
     };
     __classPrivateFieldSet(this, _KupBox_intObserver, new IntersectionObserver(callback, options), "f");
+}, _KupBox_onLoadMoreClick = function _KupBox_onLoadMoreClick() {
+    var _a;
+    let loadItems = 0;
+    switch (this.loadMoreMode) {
+        case LoadMoreMode.CONSTANT:
+            loadItems = this.loadMoreStep;
+            break;
+        case LoadMoreMode.CONSTANT_INCREMENT:
+            loadItems =
+                this.loadMoreStep * (__classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f") + 1);
+            break;
+        case LoadMoreMode.PROGRESSIVE_THRESHOLD:
+            loadItems =
+                Math.max(__classPrivateFieldGet(this, _KupBox_loadMoreEventPreviousQuantity, "f"), this.loadMoreStep) * Math.min(__classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f") + 1, 2);
+            break;
+    }
+    if (loadItems > this.loadMoreLimit) {
+        loadItems = this.loadMoreLimit;
+    }
+    this.kupLoadMoreClick.emit({
+        comp: this,
+        id: this.rootElement.id,
+        loadItems: loadItems,
+    });
+    __classPrivateFieldSet(this, _KupBox_loadMoreEventPreviousQuantity, loadItems, "f");
+    __classPrivateFieldSet(this, _KupBox_loadMoreEventCounter, (_a = __classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f"), _a++, _a), "f");
 };

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

@@ -138,6 +138,7 @@ export class KupCalendar {
                 }
             },
             eventDrop: ({ event, oldEvent }) => {
+                var _a;
                 this.kupCalendarEventDrop.emit({
                     comp: this,
                     id: this.rootElement.id,
@@ -149,6 +150,7 @@ export class KupCalendar {
                         start: event.start,
                         end: event.end,
                     },
+                    row: (_a = oldEvent.extendedProps) === null || _a === void 0 ? void 0 : _a.row,
                 });
             },
             events: this.getEvents(),
@@ -355,11 +357,11 @@ export class KupCalendar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '81ca54ecc64da284ef682bb11afdcf8ce4d30667' }, h("style", { key: '2a65b0d79e2d0b3356347657c4cbb50afbf13eaf' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '5a1efc80bc76c8bf6163acfd9e7ed1ba49d9f124', id: componentWrapperId }, h("div", { key: '975f9f451d580535f80602c2ef1de548f24797c6', class: "navigation" }, !this.hideNavigation ? (h("div", { class: "navigation__left" }, h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }), h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }), h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null, h("div", { key: 'ca9fb802c7820068a9b5f482e751606f90db72c4', class: `navigation__title ${this.hideNavigation
+        return (h(Host, { key: '256712f0367d8a4979fbe5cf01230ef6919cbe30' }, h("style", { key: '483bc12677fbf0feb94f0322d050d3e92b76aa96' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd396f95087febb8439ba747250dbde5c966664a9', id: componentWrapperId }, h("div", { key: '218107d205ccc74759b902682fbb4ffc38b4e6af', class: "navigation" }, !this.hideNavigation ? (h("div", { class: "navigation__left" }, h(FButton, { icon: "chevron_left", onClick: () => this.onPrev(), title: this.kupManager.language.translate(KupLanguageGeneric.PREVIOUS), wrapperClass: "navigation__prev" }), h(FButton, { icon: "calendar", onClick: () => this.onToday(), title: this.kupManager.language.translate(KupLanguageGeneric.TODAY), wrapperClass: "navigation__today" }), h(FButton, { icon: "chevron_right", onClick: () => this.onNext(), title: this.kupManager.language.translate(KupLanguageGeneric.NEXT), wrapperClass: "navigation__next" }))) : null, h("div", { key: '35207cde78644377b8a90dc0798da7cb3a8fb028', class: `navigation__title ${this.hideNavigation
                 ? 'navigation__title--centered'
                 : ''}`, ref: (el) => {
                 this.navTitle = el;
-            } }), !this.hideNavigation ? (h("div", { class: "navigation__right" }, h(FChip, Object.assign({}, this.setChipProps())))) : null), h("div", { key: '0b19f1dad2e7236feecd159ac0421b521bf72a04', class: "calendar", ref: (el) => (this.calendarContainer = el) }))));
+            } }), !this.hideNavigation ? (h("div", { class: "navigation__right" }, h(FChip, Object.assign({}, this.setChipProps())))) : null), h("div", { key: '0cc18bfc6befd69d45d4ba0c119fc5a4c2437d36', class: "calendar", ref: (el) => (this.calendarContainer = el) }))));
     }
     disconnectedCallback() {
         if (this.calendar) {

package/dist/components/kup-autocomplete2.js

@@ -28810,4 +28810,4 @@ function defineCustomElement() {
     } });
 }
 
-export { FCheckbox as $, defineCustomElement$1 as A, defineCustomElement as B, KupBadge as C, filterRows as D, paginateRows as E, FImage as F, sortRows as G, pageChange as H, rowsPerPageChange as I, FCell as J, KupAutocomplete as K, FChip as L, MDCRipple as M, FTextFieldMDC as N, FPaginator as O, FPaginatorMode as P, KupButton as Q, KupButtonList as R, FButton as S, FChipType as T, KupCard as U, KupChart as V, KupCheckbox as W, KupChip as X, KupColorPicker as Y, KupCombobox as Z, FTextField as _, defineCustomElement$o as a, KupDataTable as a0, KupDatePicker as a1, KupDialog as a2, KupDropdownButton as a3, FButtonStyling as a4, KupForm as a5, KupGauge as a6, KupImage as a7, KupList as a8, KupProgressBar as a9, KupRadio as aa, KupRating as ab, KupSpinner as ac, KupSwitch as ad, KupTabBar as ae, KupTextField as af, KupTimePicker as ag, KupTree as ah, defineCustomElement$n as b, componentWrapperId as c, defineCustomElement$q as d, defineCustomElement$m as e, defineCustomElement$l as f, defineCustomElement$k as g, defineCustomElement$j as h, defineCustomElement$p as i, defineCustomElement$i as j, defineCustomElement$h as k, defineCustomElement$g as l, defineCustomElement$f as m, defineCustomElement$b as n, defineCustomElement$e as o, defineCustomElement$d as p, defineCustomElement$c as q, defineCustomElement$a as r, defineCustomElement$9 as s, defineCustomElement$8 as t, defineCustomElement$7 as u, defineCustomElement$6 as v, defineCustomElement$5 as w, defineCustomElement$4 as x, defineCustomElement$3 as y, defineCustomElement$2 as z };
+export { KupDataTable as $, defineCustomElement$1 as A, defineCustomElement as B, KupBadge as C, filterRows as D, paginateRows as E, FImage as F, sortRows as G, pageChange as H, rowsPerPageChange as I, FCell as J, KupAutocomplete as K, FChip as L, MDCRipple as M, FTextFieldMDC as N, FPaginator as O, KupButton as P, KupButtonList as Q, FButton as R, FChipType as S, KupCard as T, KupChart as U, KupCheckbox as V, KupChip as W, KupColorPicker as X, KupCombobox as Y, FTextField as Z, FCheckbox as _, defineCustomElement$o as a, KupDatePicker as a0, KupDialog as a1, KupDropdownButton as a2, FButtonStyling as a3, KupForm as a4, KupGauge as a5, KupImage as a6, KupList as a7, KupProgressBar as a8, KupRadio as a9, KupRating as aa, KupSpinner as ab, KupSwitch as ac, KupTabBar as ad, KupTextField as ae, KupTimePicker as af, KupTree as ag, defineCustomElement$n as b, componentWrapperId as c, defineCustomElement$q as d, defineCustomElement$m as e, defineCustomElement$l as f, defineCustomElement$k as g, defineCustomElement$j as h, defineCustomElement$p as i, defineCustomElement$i as j, defineCustomElement$h as k, defineCustomElement$g as l, defineCustomElement$f as m, defineCustomElement$b as n, defineCustomElement$e as o, defineCustomElement$d as p, defineCustomElement$c as q, defineCustomElement$a as r, defineCustomElement$9 as s, defineCustomElement$8 as t, defineCustomElement$7 as u, defineCustomElement$6 as v, defineCustomElement$5 as w, defineCustomElement$4 as x, defineCustomElement$3 as y, defineCustomElement$2 as z };

package/dist/components/kup-box2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { k as kupManagerInstance, _ as identify, g as getProps, s as setProps, S as SortMode, z as getColumnByName, c as KupLanguageGeneric, b as KupThemeIconValues, P as KupDebugCategory, X as KupPointerEventTypes, a4 as KupDragEffect, ah as kupDraggableAttr, a6 as KupDropEventTypes, Q as KupLanguageSearch } from './kup-manager.js';
-import { D as filterRows, E as paginateRows, G as sortRows, H as pageChange, I as rowsPerPageChange, F as FImage, J as FCell, L as FChip, N as FTextFieldMDC, O as FPaginator, P as FPaginatorMode, c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r } from './kup-autocomplete2.js';
+import { D as filterRows, E as paginateRows, G as sortRows, H as pageChange, I as rowsPerPageChange, F as FImage, J as FCell, L as FChip, N as FTextFieldMDC, O as FPaginator, c as componentWrapperId, d as defineCustomElement$1, a as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, g as defineCustomElement$6, h as defineCustomElement$7, i as defineCustomElement$8, j as defineCustomElement$9, k as defineCustomElement$a, l as defineCustomElement$b, m as defineCustomElement$c, n as defineCustomElement$d, o as defineCustomElement$e, p as defineCustomElement$f, q as defineCustomElement$g, r as defineCustomElement$h, s as defineCustomElement$i, t as defineCustomElement$j, u as defineCustomElement$k, v as defineCustomElement$l, w as defineCustomElement$m, x as defineCustomElement$n, y as defineCustomElement$o, z as defineCustomElement$p, A as defineCustomElement$q, B as defineCustomElement$r } from './kup-autocomplete2.js';
 
 /**
  * Props of the kup-box component.
@@ -21,6 +21,9 @@ var KupBoxProps;
     KupBoxProps["kanban"] = "Displays the boxlist as a Kanban.";
     KupBoxProps["layout"] = "How the field will be displayed. If not present, a default one will be created.";
     KupBoxProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport.";
+    KupBoxProps["loadMoreLimit"] = "Sets a maximum limit of new records which can be required by the load more functionality.";
+    KupBoxProps["loadMoreMode"] = "Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.";
+    KupBoxProps["loadMoreStep"] = "The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.";
     KupBoxProps["multiSelection"] = "Enable multi selection.";
     KupBoxProps["pageSelected"] = "Current page number.";
     KupBoxProps["pagination"] = "Enables pagination.";
@@ -28,6 +31,7 @@ var KupBoxProps;
     KupBoxProps["scrollOnHover"] = "Activates the scroll on hover function.";
     KupBoxProps["selectBox"] = "Automatically selects the box at the specified index.";
     KupBoxProps["selectedRowsState"] = "Multiple selection.";
+    KupBoxProps["showLoadMore"] = "If set to true, displays the button to load more records.";
     KupBoxProps["showSelection"] = "If enabled, highlights the selected box/boxes.";
     KupBoxProps["sortBy"] = "If sorting is enabled, specifies which column to sort.";
     KupBoxProps["sortEnabled"] = "Enable sorting.";
@@ -35,6 +39,13 @@ var KupBoxProps;
     KupBoxProps["store"] = "";
     KupBoxProps["swipeDisabled"] = "Disable swipe.";
 })(KupBoxProps || (KupBoxProps = {}));
+//---- *NEXT functionality AKA load more ----
+var LoadMoreMode;
+(function (LoadMoreMode) {
+    LoadMoreMode["CONSTANT"] = "constant";
+    LoadMoreMode["CONSTANT_INCREMENT"] = "constant_increment";
+    LoadMoreMode["PROGRESSIVE_THRESHOLD"] = "progressive_threshold";
+})(LoadMoreMode || (LoadMoreMode = {}));
 
 class KupBoxState {
     constructor() {
@@ -44,6 +55,8 @@ class KupBoxState {
         this.pageSelected = 1;
         this.rowsPerPage = 0;
         this.load = false;
+        this.loadMoreLimit = 1000;
+        this.showLoadMore = false;
     }
     /*Add attribute*/
     toDebugString() {
@@ -71,7 +84,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         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 _KupBox_instances, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_didRenderObservers, _KupBox_setObserver;
+var _KupBox_instances, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_loadMoreEventCounter, _KupBox_loadMoreEventPreviousQuantity, _KupBox_didRenderObservers, _KupBox_setObserver, _KupBox_onLoadMoreClick;
 const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement {
     constructor() {
         super();
@@ -85,6 +98,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         this.kupDidLoad = createEvent(this, "kup-box-didload", 6);
         this.kupDidUnload = createEvent(this, "kup-box-didunload", 6);
         this.kupBoxContextMenu = createEvent(this, "kup-box-contextmenu", 6);
+        this.kupLoadMoreClick = createEvent(this, "kup-box-loadmoreclick", 6);
         _KupBox_instances.add(this);
         this.state = new KupBoxState();
         /*-------------------------------------------------*/
@@ -106,6 +120,8 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         _KupBox_intObserver.set(this, undefined);
         _KupBox_rowsRefs.set(this, []);
         _KupBox_navBarHeight.set(this, 0);
+        _KupBox_loadMoreEventCounter.set(this, 0);
+        _KupBox_loadMoreEventPreviousQuantity.set(this, 0);
         this.collapsedSection = {};
         this.selectedRows = [];
         this.rowActionMenuOpened = undefined;
@@ -125,6 +141,9 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         this.kanban = null;
         this.layout = undefined;
         this.lazyLoadRows = false;
+        this.loadMoreLimit = 1000;
+        this.loadMoreMode = LoadMoreMode.PROGRESSIVE_THRESHOLD;
+        this.loadMoreStep = 60;
         this.multiSelection = false;
         this.pageSelected = 1;
         this.pagination = false;
@@ -132,6 +151,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         this.scrollOnHover = false;
         this.selectBox = undefined;
         this.selectedRowsState = undefined;
+        this.showLoadMore = false;
         this.showSelection = true;
         this.sortBy = undefined;
         this.sortEnabled = false;
@@ -153,6 +173,8 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
                 this.selectedRowsState = this.state.selectedRowsState;
                 this.pageSelected = this.state.pageSelected;
                 this.rowsPerPage = this.state.rowsPerPage;
+                this.loadMoreLimit = state.loadMoreLimit;
+                this.showLoadMore = state.showLoadMore;
             }
         }
     }
@@ -183,6 +205,14 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
                 this.state.selectedRowsState = selectedRowsState;
                 somethingChanged = true;
             }
+            if (!this.kupManager.objects.deepEqual(this.state.loadMoreLimit, this.loadMoreLimit)) {
+                this.state.loadMoreLimit = this.loadMoreLimit;
+                somethingChanged = true;
+            }
+            if (!this.kupManager.objects.deepEqual(this.state.showLoadMore, this.showLoadMore)) {
+                this.state.showLoadMore = this.showLoadMore;
+                somethingChanged = true;
+            }
             if (!this.state.load) {
                 this.state.load = true;
                 return;
@@ -1210,10 +1240,16 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
                 } })));
         }
         let paginator = null;
-        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
+        if (this.showLoadMore || (!this.lazyLoadRows && this.pagination)) {
+            paginator = (h(FPaginator, { id: 'top-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) }));
+                    : this.rowsPerPage, onLoadMore: this.showLoadMore
+                    ? () => {
+                        __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_onLoadMoreClick).call(this);
+                    }
+                    : null, onNextPage: () => this.handlePageChange(this.currentPage + 1), onPrevPage: () => this.handlePageChange(this.currentPage - 1), onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
         }
         let boxContent = null;
         let containerStyle = {};
@@ -1282,6 +1318,9 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         "kanban": [16],
         "layout": [16],
         "lazyLoadRows": [4, "lazy-load-rows"],
+        "loadMoreLimit": [2, "load-more-limit"],
+        "loadMoreMode": [1, "load-more-mode"],
+        "loadMoreStep": [2, "load-more-step"],
         "multiSelection": [4, "multi-selection"],
         "pageSelected": [2, "page-selected"],
         "pagination": [4],
@@ -1289,6 +1328,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         "scrollOnHover": [4, "scroll-on-hover"],
         "selectBox": [2, "select-box"],
         "selectedRowsState": [1025, "selected-rows-state"],
+        "showLoadMore": [4, "show-load-more"],
         "showSelection": [4, "show-selection"],
         "sortBy": [1025, "sort-by"],
         "sortEnabled": [4, "sort-enabled"],
@@ -1315,7 +1355,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         "layout": ["onLayoutChanged"],
         "selectBox": ["onSelectBoxChanged"]
     }]);
-_KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
+_KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_loadMoreEventCounter = new WeakMap(), _KupBox_loadMoreEventPreviousQuantity = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
     if (this.lazyLoadRows &&
         this.currentRowsPerPage < this.data.rows.length) {
         __classPrivateFieldGet(this, _KupBox_intObserver, "f").observe(__classPrivateFieldGet(this, _KupBox_rowsRefs, "f")[__classPrivateFieldGet(this, _KupBox_rowsRefs, "f").length - 1]);
@@ -1326,11 +1366,11 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
             if (entry.isIntersecting) {
                 this.kupManager.debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
                 const delta = this.data.rows.length - this.currentRowsPerPage;
-                if (delta < 10) {
+                if (delta < this.loadMoreStep) {
                     this.currentRowsPerPage += delta;
                 }
                 else {
-                    this.currentRowsPerPage += 10;
+                    this.currentRowsPerPage += this.loadMoreStep;
                 }
                 entry.target.classList.remove('last-row');
                 __classPrivateFieldGet(this, _KupBox_intObserver, "f").unobserve(entry.target);
@@ -1342,6 +1382,32 @@ _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_n
         rootMargin: '-' + __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + 'px 0px 0px 0px',
     };
     __classPrivateFieldSet(this, _KupBox_intObserver, new IntersectionObserver(callback, options), "f");
+}, _KupBox_onLoadMoreClick = function _KupBox_onLoadMoreClick() {
+    var _a;
+    let loadItems = 0;
+    switch (this.loadMoreMode) {
+        case LoadMoreMode.CONSTANT:
+            loadItems = this.loadMoreStep;
+            break;
+        case LoadMoreMode.CONSTANT_INCREMENT:
+            loadItems =
+                this.loadMoreStep * (__classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f") + 1);
+            break;
+        case LoadMoreMode.PROGRESSIVE_THRESHOLD:
+            loadItems =
+                Math.max(__classPrivateFieldGet(this, _KupBox_loadMoreEventPreviousQuantity, "f"), this.loadMoreStep) * Math.min(__classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f") + 1, 2);
+            break;
+    }
+    if (loadItems > this.loadMoreLimit) {
+        loadItems = this.loadMoreLimit;
+    }
+    this.kupLoadMoreClick.emit({
+        comp: this,
+        id: this.rootElement.id,
+        loadItems: loadItems,
+    });
+    __classPrivateFieldSet(this, _KupBox_loadMoreEventPreviousQuantity, loadItems, "f");
+    __classPrivateFieldSet(this, _KupBox_loadMoreEventCounter, (_a = __classPrivateFieldGet(this, _KupBox_loadMoreEventCounter, "f"), _a++, _a), "f");
 };
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/kup-button-list.js

@@ -1,4 +1,4 @@
-import { R as KupButtonList$1, y as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { Q as KupButtonList$1, y as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupButtonList = KupButtonList$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-button.js

@@ -1,4 +1,4 @@
-import { Q as KupButton$1, z as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { P as KupButton$1, z as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupButton = KupButton$1;
 const defineCustomElement = defineCustomElement$1;