@sme.up/ketchup 5.0.0 → 5.2.1-SNAPSHOT

package/dist/collection/components/kup-photo-frame/kup-photo-frame-declarations.js

@@ -0,0 +1,10 @@
+/**
+ * Props of the kup-photo-frame component.
+ * Used to export every prop in an object.
+ */
+export var KupPhotoFrameProps;
+(function (KupPhotoFrameProps) {
+  KupPhotoFrameProps["customStyle"] = "Custom style of the component.";
+  KupPhotoFrameProps["placeholderAttrs"] = "Html attributes of the picture before the component enters the viewport.";
+  KupPhotoFrameProps["resourceAttrs"] = "Html attributes of the picture after the component enters the viewport.";
+})(KupPhotoFrameProps || (KupPhotoFrameProps = {}));

package/dist/collection/components/kup-photo-frame/kup-photo-frame.css

@@ -0,0 +1,70 @@
+/**
+* @prop --kup-photoframe-border: Sets the border of the component.
+* @prop --kup-photoframe-fade-out-time: Sets the time of the plcaeholder's fade out transition.
+*/
+:host {
+  --kup_photoframe_border: var(
+    --kup-photoframe-border,
+    1px inset var(--kup-border-color)
+  );
+  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 2000ms);
+  border: var(--kup_photoframe_border);
+  display: block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+#kup-component {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.horizontal img {
+  width: 100%;
+}
+
+.vertical img {
+  height: 100%;
+}
+
+.placeholder {
+  display: none;
+  transition: opacity var(--kup_photoframe_fade_out_time) ease-out;
+  will-change: opacity;
+  z-index: 1;
+}
+.placeholder--loaded {
+  display: block;
+}
+.placeholder--fade-out {
+  opacity: 0;
+  position: absolute;
+}
+
+.resource {
+  display: none;
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.resource--fade-in {
+  display: block;
+  position: relative;
+}
+
+/*-------------------------------------------------*/
+/*        C o m p o n e n t   C l a s s e s        */
+/*-------------------------------------------------*/
+:host(.kup-fit) img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}

package/dist/collection/components/kup-photo-frame/kup-photo-frame.js

@@ -0,0 +1,382 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) 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 _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_resourceEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
+import { Component, Element, Event, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
+import { Method } from '@stencil/core/internal';
+import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupPhotoFrameProps } from './kup-photo-frame-declarations';
+export class KupPhotoFrame {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    this.isInViewport = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * Html attributes of the picture before the component enters the viewport.
+     * @default {}
+     */
+    this.placeholderAttrs = {};
+    /**
+     * Html attributes of the picture after the component enters the viewport.
+     * @default {}
+     */
+    this.resourceAttrs = {};
+    /**
+     * Percentage of the component dimensions entering the viewport (0.1 => 1).
+     * @default 0.25
+     */
+    this.threshold = 0.25;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupPhotoFrame_intObserver.set(this, null);
+    _KupPhotoFrame_kupManager.set(this, kupManagerInstance());
+    _KupPhotoFrame_placeholderEl.set(this, null);
+    _KupPhotoFrame_resourceEl.set(this, null);
+    _KupPhotoFrame_renderResource.set(this, false);
+    _KupPhotoFrame_wrapperEl.set(this, null);
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupPhotoFrameProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupPhotoFrameProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  setObserver() {
+    let callback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.isInViewport = true;
+          __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").unobserve(this.rootElement);
+        }
+      });
+    };
+    let options = {
+      threshold: this.threshold,
+    };
+    __classPrivateFieldSet(this, _KupPhotoFrame_intObserver, new IntersectionObserver(callback, options), "f");
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.register(this);
+    this.setObserver();
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logRender(this, false);
+  }
+  componentDidRender() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    if (this.isInViewport && !__classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f")) {
+      __classPrivateFieldSet(this, _KupPhotoFrame_renderResource, true, "f");
+    }
+    return (h(Host, null,
+      h("style", null, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId, ref: (el) => {
+          __classPrivateFieldSet(this, _KupPhotoFrame_wrapperEl, el, "f");
+        } },
+        h("img", Object.assign({}, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
+            if (__classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalWidth >
+              __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalHeight) {
+              __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('horizontal');
+            }
+            else {
+              __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('vertical');
+            }
+            __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").observe(this.rootElement);
+            __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--loaded');
+            this.kupPhotoFramePlaceholderLoad.emit({
+              comp: this,
+              id: this.rootElement.id,
+            });
+          } })),
+        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_resourceEl, el, "f")), onLoad: () => {
+            __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--fade-out');
+            __classPrivateFieldGet(this, _KupPhotoFrame_resourceEl, "f").classList.add('resource--fade-in');
+            this.kupPhotoFrameResourceLoad.emit({
+              comp: this,
+              id: this.rootElement.id,
+            });
+          } }))) : null)));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").unobserve(this.rootElement);
+  }
+  static get is() { return "kup-photo-frame"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-photo-frame.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-photo-frame.css"]
+  }; }
+  static get properties() { return {
+    "customStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+          }],
+        "text": "Custom style of the component."
+      },
+      "attribute": "custom-style",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholderAttrs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "GenericObject",
+        "resolved": "GenericObject",
+        "references": {
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{}"
+          }],
+        "text": "Html attributes of the picture before the component enters the viewport."
+      },
+      "defaultValue": "{}"
+    },
+    "resourceAttrs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "GenericObject",
+        "resolved": "GenericObject",
+        "references": {
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{}"
+          }],
+        "text": "Html attributes of the picture after the component enters the viewport."
+      },
+      "defaultValue": "{}"
+    },
+    "threshold": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "0.25"
+          }],
+        "text": "Percentage of the component dimensions entering the viewport (0.1 => 1)."
+      },
+      "attribute": "threshold",
+      "reflect": false,
+      "defaultValue": "0.25"
+    }
+  }; }
+  static get states() { return {
+    "isInViewport": {}
+  }; }
+  static get events() { return [{
+      "method": "kupPhotoFramePlaceholderLoad",
+      "name": "kup-photoframe-placeholderload",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the placeholder is loaded."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
+    }, {
+      "method": "kupPhotoFrameResourceLoad",
+      "name": "kup-photoframe-resourceload",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the resource is loaded."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getProps": {
+      "complexType": {
+        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
+              }],
+            "text": "- When provided and true, the result will be the list of props with their description."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<GenericObject>"
+      },
+      "docs": {
+        "text": "Used to retrieve component's props values.",
+        "tags": [{
+            "name": "param",
+            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+          }, {
+            "name": "returns",
+            "text": "List of props as object, each key will be a prop."
+          }]
+      }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is used to trigger a new render of the component.",
+        "tags": []
+      }
+    },
+    "setProps": {
+      "complexType": {
+        "signature": "(props: GenericObject) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
+              }],
+            "text": "- Object containing props that will be set to the component."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the props to the component.",
+        "tags": [{
+            "name": "param",
+            "text": "props - Object containing props that will be set to the component."
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "rootElement"; }
+}
+_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_resourceEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();

package/dist/collection/components/kup-tab-bar/kup-tab-bar.css

@@ -25,7 +25,6 @@
   );
   --kup_tabbar_tab_padding: var(--kup-tabbar-tab-padding, 0 24px);
   display: block;
-  font-family: var(--kup_tabbar_font_family);
   font-size: var(--kup_tabbar_font_size);
 }
 
@@ -67,6 +66,7 @@
   appearance: none;
   z-index: 1;
   height: var(--kup_tabbar_height);
+  font-family: var(--kup_tabbar_font_family);
   font-size: 0.875em;
   font-weight: var(--kup_tabbar_font_weight);
   letter-spacing: 0.0892857143em;

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

@@ -370,7 +370,10 @@ export class KupTimePicker {
     }
   }
   createTimeListData(value) {
-    let listData = [];
+    const date = new Date();
+    const listData = [];
+    const totalDayMinutes = 24 * 60;
+    const itemsCount = totalDayMinutes / this.timeMinutesStep;
     let selectedTime;
     if (value == null || value.trim() == '') {
       selectedTime = new Date();
@@ -380,9 +383,6 @@ export class KupTimePicker {
         ? KupDatesFormats.ISO_TIME
         : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
     }
-    let totalDayMinutes = 24 * 60;
-    let itemsCount = totalDayMinutes / this.timeMinutesStep;
-    let date = new Date();
     date.setHours(0, 0, 0);
     for (let i = 0; i < itemsCount; i++) {
       let selected = false;
@@ -390,14 +390,14 @@ export class KupTimePicker {
         date.getMinutes() == selectedTime.getMinutes()) {
         selected = true;
       }
-      let text = formatTime(date, this.manageSeconds);
-      let value = formattedStringToCustomUnformattedStringTime(text, this.manageSeconds
+      const value = formatTime(date, this.manageSeconds);
+      const id = formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
         ? KupDatesFormats.ISO_TIME
         : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, this.manageSeconds);
       let item = {
-        text: text,
-        value: value,
+        id: id,
         selected: selected,
+        value: value,
       };
       listData[listData.length] = item;
       date.setMinutes(date.getMinutes() + this.timeMinutesStep);

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

@@ -7,7 +7,7 @@ import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-hel
 import { KupTreeState } from './kup-tree-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { getColumnByName } from '../../utils/cell-utils';
-import { deepEqual, getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
+import { getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
 import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
 import { FiltersColumnMenu } from '../../utils/filters/filters-column-menu';
 import { KupGlobalFilterMode, } from '../../utils/filters/filters-declarations';
@@ -212,31 +212,31 @@ export class KupTree {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!deepEqual(this.state.filters, this.filters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.density, this.density)) {
+      if (!this.kupManager.objects.deepEqual(this.state.density, this.density)) {
         this.state.density = this.density;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFilters, this.showFilters)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFilters, this.showFilters)) {
         this.state.showFilters = this.showFilters;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.showFooter, this.showFooter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.showFooter, this.showFooter)) {
         this.state.showFooter = this.showFooter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.totals, this.totals)) {
+      if (!this.kupManager.objects.deepEqual(this.state.totals, this.totals)) {
         this.state.totals = Object.assign({}, this.totals);
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilter, this.globalFilter)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
         this.state.globalFilter = this.globalFilter;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
@@ -348,9 +348,7 @@ export class KupTree {
    * @param {KupDataColumn} column - Column to hide.
    */
   async hideColumn(column) {
-    this.kupManager.data.datasetOperations.column.hide(this.columns, [
-      column.name,
-    ]);
+    this.kupManager.data.column.hide(this.columns, [column.name]);
     this.kupColumnRemove.emit({
       comp: this,
       id: this.rootElement.id,
@@ -804,8 +802,7 @@ export class KupTree {
         this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
         const data = this.data;
         this.columns = data.columns;
-        this.data =
-          this.kupManager.data.datasetOperations.row.toNode(data);
+        this.data = this.kupManager.data.row.toNode(data);
         this.showColumns = true;
         this.showHeader = true;
       }
@@ -1178,46 +1175,36 @@ export class KupTree {
       if (this.isOpenedTotalMenuForColumn(column.name)) {
         let listData = [
           {
-            text: translation[TotalLabel.COUNT],
-            value: TotalMode.COUNT,
-            selected: false,
+            id: TotalMode.COUNT,
+            value: translation[TotalLabel.COUNT],
           },
           {
-            text: translation[TotalLabel.DISTINCT],
-            value: TotalMode.DISTINCT,
-            selected: false,
+            id: TotalMode.DISTINCT,
+            value: translation[TotalLabel.DISTINCT],
           },
         ];
         if (this.kupManager.objects.isNumber(column.obj)) {
-          // TODO Move these objects in declarations
           listData.push({
-            text: translation[TotalLabel.SUM],
-            value: TotalMode.SUM,
-            selected: false,
+            id: TotalMode.SUM,
+            value: translation[TotalLabel.SUM],
           }, {
-            text: translation[TotalLabel.AVERAGE],
-            value: TotalMode.AVERAGE,
-            selected: false,
+            id: TotalMode.AVERAGE,
+            value: translation[TotalLabel.AVERAGE],
           }, {
-            text: translation[TotalLabel.MIN],
-            value: TotalMode.MIN,
-            selected: false,
+            id: TotalMode.MIN,
+            value: translation[TotalLabel.MIN],
           }, {
-            text: translation[TotalLabel.MAX],
-            value: TotalMode.MAX,
-            selected: false,
+            id: TotalMode.MAX,
+            value: translation[TotalLabel.MAX],
           });
         }
-        // TODO replace this with find which is a better approach
-        // Note that this is not supported in older IE
-        let selectedItem = listData.find((item) => item.text === menuLabel);
+        let selectedItem = listData.find((item) => item.value === menuLabel);
         if (selectedItem) {
           selectedItem.selected = true;
           listData.push({
-            text: translation[TotalLabel.CANC],
-            value: TotalLabel.CANC,
-            selected: false,
+            id: TotalLabel.CANC,
             separator: true,
+            value: translation[TotalLabel.CANC],
           });
         }
         totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column) }));

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

@@ -53,9 +53,9 @@ function getPageItems(props, maxNumberOfPage) {
   for (let i = 1; i <= maxNumberOfPage; i++) {
     const selected = i == props.currentPage;
     pageItems.push({
-      text: i.toString(),
-      value: i.toString(),
+      id: i.toString(),
       selected: selected,
+      value: i.toString(),
     });
   }
   return pageItems;
@@ -69,17 +69,17 @@ function getRowsItems(props) {
   while (i < props.max) {
     const selected = i == props.perPage;
     rowsPerPageItems.push({
-      text: i.toString(),
-      value: i.toString(),
+      id: i.toString(),
       selected: selected,
+      value: i.toString(),
     });
     i = i * 2;
   }
   const selected = props.max == props.perPage;
   rowsPerPageItems.push({
-    text: props.max.toString(),
-    value: props.max.toString(),
+    id: props.max.toString(),
     selected: selected,
+    value: props.max.toString(),
   });
   return rowsPerPageItems;
 }