@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -3,14 +3,14 @@ import { h } from "@stencil/core";
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FCheckbox = (props) => {
-  const indeterminateAttr = {
-    'data-indeterminate': props.indeterminate ? true : false,
-  };
-  const classObj = {
-    checkbox: true,
-    'checkbox--checked': props.checked && !props.indeterminate ? true : false,
-    'checkbox--disabled': props.disabled ? true : false,
-    'checkbox--indeterminate': props.indeterminate ? true : false,
-  };
-  return (h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: classObj }, h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })), h("div", { class: "checkbox__background", onClick: props.onChange }, h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "checkbox__mixedmark" }))), props.label ? h("label", null, props.label) : undefined)));
+    const indeterminateAttr = {
+        'data-indeterminate': props.indeterminate ? true : false,
+    };
+    const classObj = {
+        checkbox: true,
+        'checkbox--checked': props.checked && !props.indeterminate ? true : false,
+        'checkbox--disabled': props.disabled ? true : false,
+        'checkbox--indeterminate': props.indeterminate ? true : false,
+    };
+    return (h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: classObj }, h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })), h("div", { class: "checkbox__background", onClick: props.onChange }, h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "checkbox__mixedmark" }))), props.label ? h("label", null, props.label) : undefined)));
 };

package/dist/collection/f-components/f-chip/f-chip-declarations.js

@@ -8,8 +8,8 @@
  */
 export var FChipType;
 (function (FChipType) {
-  FChipType["CHOICE"] = "choice";
-  FChipType["FILTER"] = "filter";
-  FChipType["INPUT"] = "input";
-  FChipType["STANDARD"] = "standard";
+    FChipType["CHOICE"] = "choice";
+    FChipType["FILTER"] = "filter";
+    FChipType["INPUT"] = "input";
+    FChipType["STANDARD"] = "standard";
 })(FChipType || (FChipType = {}));

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

@@ -8,94 +8,94 @@ const dom = document.documentElement;
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FChip = (props) => {
-  if (!props.type) {
-    props.type = FChipType.STANDARD;
-  }
-  const isChoice = props.type.toLowerCase() === FChipType.CHOICE;
-  const isFilter = props.type.toLowerCase() === FChipType.FILTER;
-  const isInput = props.type.toLowerCase() === FChipType.INPUT;
-  const classObj = {
-    'chip-set': true,
-    'chip-set--choice': isChoice ? true : false,
-    'chip-set--filter': isFilter ? true : false,
-    'chip-set--input': isInput ? true : false,
-  };
-  return (h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
+    if (!props.type) {
+        props.type = FChipType.STANDARD;
+    }
+    const isChoice = props.type.toLowerCase() === FChipType.CHOICE;
+    const isFilter = props.type.toLowerCase() === FChipType.FILTER;
+    const isInput = props.type.toLowerCase() === FChipType.INPUT;
+    const classObj = {
+        'chip-set': true,
+        'chip-set--choice': isChoice ? true : false,
+        'chip-set--filter': isFilter ? true : false,
+        'chip-set--input': isInput ? true : false,
+    };
+    return (h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
 /*-------------------------------------------------*/
 function createChipList(props, isChoice, isFilter, isInput) {
-  const chipList = [];
-  for (let i = 0; props.data && i < props.data.length; i++) {
-    const chipGroup = [];
-    recursive(props.data[i], 0);
-    chipList.push(h("div", { class: "chip-set__item" }, ...chipGroup));
-    function recursive(chip, indent) {
-      const hasChildren = !!(chip.children && chip.children.length > 0);
-      const showChildren = !!(hasChildren && chip.isExpanded);
-      const indentStyle = {
-        ['--kup_chip_indent_offset']: indent.toString(),
-      };
-      chipGroup.push(h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
-          ? 'chip-set__wrapper--hidden-children'
-          : ''}` }, h("div", { class: "chip-set__indent", style: indentStyle }), hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
-          props.onExpansionClick[i]
-          ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
-          : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
-          '/' +
-          dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
-          ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null, createChip(chip)));
-      if (showChildren) {
-        for (let index = 0; index < chip.children.length; index++) {
-          if (chip.children[index]) {
-            recursive(chip.children[index], indent + 1);
-          }
+    const chipList = [];
+    for (let i = 0; props.data && i < props.data.length; i++) {
+        const chipGroup = [];
+        recursive(props.data[i], 0);
+        chipList.push(h("div", { class: "chip-set__item" }, ...chipGroup));
+        function recursive(chip, indent) {
+            const hasChildren = !!(chip.children && chip.children.length > 0);
+            const showChildren = !!(hasChildren && chip.isExpanded);
+            const indentStyle = {
+                ['--kup_chip_indent_offset']: indent.toString(),
+            };
+            chipGroup.push(h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
+                    ? 'chip-set__wrapper--hidden-children'
+                    : ''}` }, h("div", { class: "chip-set__indent", style: indentStyle }), hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
+                    props.onExpansionClick[i]
+                    ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
+                    : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
+                    '/' +
+                    dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
+                    ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null, createChip(chip)));
+            if (showChildren) {
+                for (let index = 0; index < chip.children.length; index++) {
+                    if (chip.children[index]) {
+                        recursive(chip.children[index], indent + 1);
+                    }
+                }
+            }
         }
-      }
-    }
-    function createChip(chip) {
-      const onlyIcon = !!(chip.icon && !chip.value);
-      let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
-      let iconEl = [];
-      let iconClass = 'chip__icon chip__icon--leading';
-      if (isFilter || isChoice) {
-        if (chip.checked) {
-          componentClass += ' chip--selected';
-          if (isFilter) {
-            iconClass += ' chip__icon--leading-hidden';
-          }
+        function createChip(chip) {
+            const onlyIcon = !!(chip.icon && !chip.value);
+            let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
+            let iconEl = [];
+            let iconClass = 'chip__icon chip__icon--leading';
+            if (isFilter || isChoice) {
+                if (chip.checked) {
+                    componentClass += ' chip--selected';
+                    if (isFilter) {
+                        iconClass += ' chip__icon--leading-hidden';
+                    }
+                }
+            }
+            if (chip.icon) {
+                const p = {
+                    color: isChoice && chip.checked
+                        ? `var(${KupThemeColorValues.PRIMARY})`
+                        : `var(${KupThemeColorValues.TEXT})`,
+                    resource: chip.icon,
+                    sizeX: '18px',
+                    sizeY: '18px',
+                    wrapperClass: iconClass,
+                };
+                iconEl.push(h(FImage, Object.assign({}, p)));
+            }
+            if (isFilter) {
+                iconEl.push(h("span", { class: "chip__checkmark" }, h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
+            }
+            return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
+                    ? props.onClick[i].bind(props.onClick[i], chip)
+                    : null, role: "row", title: chip.title ? chip.title : '' }, h("span", { class: "chip-set__indent" }), iconEl, h("span", { role: "gridcell" }, h("span", { role: "button", tabindex: i, class: "chip__primary-action",
+                // @ts-ignore
+                value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
+                    ? props.onBlur[i].bind(props.onBlur[i], chip)
+                    : null, onFocus: props.onFocus && props.onFocus[i]
+                    ? props.onFocus[i].bind(props.onFocus[i], chip)
+                    : null }, h("span", { class: "chip__text" }, props.displayId
+                ? chip.id + ' - ' + chip.value
+                : chip.value))), isInput ? (h("span", { role: "gridcell" }, h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
+                    ? props.onIconClick[i].bind(props.onIconClick[i], chip)
+                    : null }))) : null));
         }
-      }
-      if (chip.icon) {
-        const p = {
-          color: isChoice && chip.checked
-            ? `var(${KupThemeColorValues.PRIMARY})`
-            : `var(${KupThemeColorValues.TEXT})`,
-          resource: chip.icon,
-          sizeX: '18px',
-          sizeY: '18px',
-          wrapperClass: iconClass,
-        };
-        iconEl.push(h(FImage, Object.assign({}, p)));
-      }
-      if (isFilter) {
-        iconEl.push(h("span", { class: "chip__checkmark" }, h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
-      }
-      return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
-          ? props.onClick[i].bind(props.onClick[i], chip)
-          : null, role: "row", title: chip.title ? chip.title : '' }, h("span", { class: "chip-set__indent" }), iconEl, h("span", { role: "gridcell" }, h("span", { role: "button", tabindex: i, class: "chip__primary-action",
-        // @ts-ignore
-        value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
-          ? props.onBlur[i].bind(props.onBlur[i], chip)
-          : null, onFocus: props.onFocus && props.onFocus[i]
-          ? props.onFocus[i].bind(props.onFocus[i], chip)
-          : null }, h("span", { class: "chip__text" }, props.displayId
-        ? chip.id + ' - ' + chip.value
-        : chip.value))), isInput ? (h("span", { role: "gridcell" }, h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
-          ? props.onIconClick[i].bind(props.onIconClick[i], chip)
-          : null }))) : null));
     }
-  }
-  return chipList;
+    return chipList;
 }

package/dist/collection/f-components/f-image/f-image-declarations.js

@@ -4,5 +4,5 @@
  */
 export var FImageShape;
 (function (FImageShape) {
-  FImageShape["BAR"] = "bar";
+    FImageShape["BAR"] = "bar";
 })(FImageShape || (FImageShape = {}));

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

@@ -5,96 +5,96 @@ import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarat
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FImage = (props) => {
-  let el;
-  let style;
-  if (props.resource) {
-    if (props.resource.indexOf('.') > -1 ||
-      props.resource.indexOf('/') > -1 ||
-      props.resource.indexOf('\\') > -1) {
-      style = {
-        '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
-        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-      };
-      el = createImage(props);
+    let el;
+    let style;
+    if (props.resource) {
+        if (props.resource.indexOf('.') > -1 ||
+            props.resource.indexOf('/') > -1 ||
+            props.resource.indexOf('\\') > -1) {
+            style = {
+                '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
+                '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+            };
+            el = createImage(props);
+        }
+        else {
+            style = {
+                '--kup_image_height': props.sizeY ? props.sizeY : '100%',
+                '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+            };
+            el = createIcon(props);
+        }
     }
-    else {
-      style = {
-        '--kup_image_height': props.sizeY ? props.sizeY : '100%',
-        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-      };
-      el = createIcon(props);
+    else if (props.data) {
+        style = {
+            '--kup_image_height': props.sizeY ? props.sizeY : '100%',
+            '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+        };
+        el = createBar(props.data);
     }
-  }
-  else if (props.data) {
-    style = {
-      '--kup_image_height': props.sizeY ? props.sizeY : '100%',
-      '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-    };
-    el = createBar(props.data);
-  }
-  const badgeCollection = [];
-  if (props.badgeData) {
-    for (let index = 0; index < props.badgeData.length; index++) {
-      badgeCollection.push(h("kup-badge", Object.assign({}, props.badgeData[index])));
+    const badgeCollection = [];
+    if (props.badgeData) {
+        for (let index = 0; index < props.badgeData.length; index++) {
+            badgeCollection.push(h("kup-badge", Object.assign({}, props.badgeData[index])));
+        }
     }
-  }
-  return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }), el, ...badgeCollection));
+    return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }), el, ...badgeCollection));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
 /*-------------------------------------------------*/
 function createIcon(props) {
-  const classObj = {
-    'f-image__icon': true,
-  };
-  const style = {
-    background: props.color
-      ? props.color
-      : `var(${KupThemeColorValues.ICON})`,
-  };
-  if (props.resource.indexOf('--kup') > -1) {
-    let themeIcon = props.resource.replace('--', '');
-    classObj['kup-icon'] = true;
-    classObj[themeIcon] = true;
-  }
-  else {
-    const path = getAssetPath(`./assets/svg/${props.resource}.svg`);
-    style.mask = `url('${path}') no-repeat center`;
-    style.webkitMask = `url('${path}') no-repeat center`;
-  }
-  return h("div", { class: classObj, style: style });
+    const classObj = {
+        'f-image__icon': true,
+    };
+    const style = {
+        background: props.color
+            ? props.color
+            : `var(${KupThemeColorValues.ICON})`,
+    };
+    if (props.resource.indexOf('--kup') > -1) {
+        let themeIcon = props.resource.replace('--', '');
+        classObj['kup-icon'] = true;
+        classObj[themeIcon] = true;
+    }
+    else {
+        const path = getAssetPath(`./assets/svg/${props.resource}.svg`);
+        style.mask = `url('${path}') no-repeat center`;
+        style.webkitMask = `url('${path}') no-repeat center`;
+    }
+    return h("div", { class: classObj, style: style });
 }
 function createImage(props) {
-  return h("img", { onLoad: props.onLoad, src: props.resource });
+    return h("img", { onLoad: props.onLoad, src: props.resource });
 }
 function createBar(data) {
-  const steps = [];
-  let leftProgression = 0;
-  for (let i = 0; i < data.length; i++) {
-    let drawStep = undefined;
-    if (!data[i].shape) {
-      data[i].shape = FImageShape.BAR;
-    }
-    if (!data[i].color) {
-      data[i].color = 'transparent';
-    }
-    if (!data[i].height) {
-      data[i].height = '100%';
+    const steps = [];
+    let leftProgression = 0;
+    for (let i = 0; i < data.length; i++) {
+        let drawStep = undefined;
+        if (!data[i].shape) {
+            data[i].shape = FImageShape.BAR;
+        }
+        if (!data[i].color) {
+            data[i].color = 'transparent';
+        }
+        if (!data[i].height) {
+            data[i].height = '100%';
+        }
+        if (!data[i].width) {
+            data[i].width = '100%';
+        }
+        const stepId = 'step-' + i;
+        const stepClass = 'css-step bottom-aligned';
+        const stepStyle = {
+            backgroundColor: data[i].color,
+            left: leftProgression + '%',
+            height: data[i].height,
+            width: data[i].width,
+        };
+        leftProgression += parseFloat(data[i].width);
+        drawStep = (h("span", { id: stepId, class: stepClass, style: stepStyle }));
+        steps.push(drawStep);
     }
-    if (!data[i].width) {
-      data[i].width = '100%';
-    }
-    const stepId = 'step-' + i;
-    const stepClass = 'css-step bottom-aligned';
-    const stepStyle = {
-      backgroundColor: data[i].color,
-      left: leftProgression + '%',
-      height: data[i].height,
-      width: data[i].width,
-    };
-    leftProgression += parseFloat(data[i].width);
-    drawStep = (h("span", { id: stepId, class: stepClass, style: stepStyle }));
-    steps.push(drawStep);
-  }
-  return h("div", { class: "f-image__css" }, steps);
+    return h("div", { class: "f-image__css" }, steps);
 }

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

@@ -1,5 +1,5 @@
 export var FPaginatorMode;
 (function (FPaginatorMode) {
-  FPaginatorMode["SIMPLE"] = "simple";
-  FPaginatorMode["FULL"] = "full";
+    FPaginatorMode["SIMPLE"] = "simple";
+    FPaginatorMode["FULL"] = "full";
 })(FPaginatorMode || (FPaginatorMode = {}));

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

@@ -1,28 +1,28 @@
 const dom = document.documentElement;
 export function pageChange(pageNumber, max, perPage) {
-  if (dom.ketchup.math.isNumber(pageNumber)) {
-    const numberOfPages = Math.ceil(max / perPage);
-    let tmpNewPage = pageNumber;
-    if (tmpNewPage > numberOfPages) {
-      tmpNewPage = numberOfPages;
+    if (dom.ketchup.math.isNumber(pageNumber)) {
+        const numberOfPages = Math.ceil(max / perPage);
+        let tmpNewPage = pageNumber;
+        if (tmpNewPage > numberOfPages) {
+            tmpNewPage = numberOfPages;
+        }
+        if (tmpNewPage < 1) {
+            tmpNewPage = 1;
+        }
+        return tmpNewPage;
     }
-    if (tmpNewPage < 1) {
-      tmpNewPage = 1;
-    }
-    return tmpNewPage;
-  }
-  return null;
+    return null;
 }
 export function rowsPerPageChange(rowsNumber, max) {
-  if (dom.ketchup.math.isNumber(rowsNumber)) {
-    let tmpRowsPerPage = rowsNumber;
-    if (tmpRowsPerPage > max) {
-      tmpRowsPerPage = max;
-    }
-    if (tmpRowsPerPage < 1) {
-      tmpRowsPerPage = 1;
+    if (dom.ketchup.math.isNumber(rowsNumber)) {
+        let tmpRowsPerPage = rowsNumber;
+        if (tmpRowsPerPage > max) {
+            tmpRowsPerPage = max;
+        }
+        if (tmpRowsPerPage < 1) {
+            tmpRowsPerPage = 1;
+        }
+        return tmpRowsPerPage;
     }
-    return tmpRowsPerPage;
-  }
-  return null;
+    return null;
 }

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

@@ -8,79 +8,79 @@ const dom = document.documentElement;
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FPaginator = (props) => {
-  const maxNumberOfPage = Math.ceil(props.max / props.perPage);
-  const pageItems = getPageItems(props, maxNumberOfPage);
-  const rowsPerPageItems = getRowsItems(props);
-  const dataPageSelector = {
-    'kup-list': {
-      data: pageItems,
-    },
-    'kup-text-field': {
-      label: dom.ketchup.language.translate(KupLanguagePage.PAGE),
-      helper: dom.ketchup.language.translate(KupLanguagePage.TOTAL) +
-        `: ${maxNumberOfPage}`,
-      helperWhenFocused: true,
-      inputType: 'number',
-      max: maxNumberOfPage,
-      min: 1,
-    },
-  };
-  const dataRowsSelector = {
-    'kup-list': {
-      data: rowsPerPageItems,
-    },
-    'kup-text-field': {
-      label: dom.ketchup.language.translate(KupLanguageRow.ROWS) +
-        ' / ' +
-        dom.ketchup.language.translate(KupLanguagePage.PAGE),
-      helper: dom.ketchup.language.translate(KupLanguageRow.TOTAL) +
-        `: ${props.max}`,
-      helperWhenFocused: true,
-      inputType: 'number',
-      max: props.max,
-      min: 1,
-    },
-  };
-  return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null, h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null, h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }), props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), styling: FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
+    const maxNumberOfPage = Math.ceil(props.max / props.perPage);
+    const pageItems = getPageItems(props, maxNumberOfPage);
+    const rowsPerPageItems = getRowsItems(props);
+    const dataPageSelector = {
+        'kup-list': {
+            data: pageItems,
+        },
+        'kup-text-field': {
+            label: dom.ketchup.language.translate(KupLanguagePage.PAGE),
+            helper: dom.ketchup.language.translate(KupLanguagePage.TOTAL) +
+                `: ${maxNumberOfPage}`,
+            helperWhenFocused: true,
+            inputType: 'number',
+            max: maxNumberOfPage,
+            min: 1,
+        },
+    };
+    const dataRowsSelector = {
+        'kup-list': {
+            data: rowsPerPageItems,
+        },
+        'kup-text-field': {
+            label: dom.ketchup.language.translate(KupLanguageRow.ROWS) +
+                ' / ' +
+                dom.ketchup.language.translate(KupLanguagePage.PAGE),
+            helper: dom.ketchup.language.translate(KupLanguageRow.TOTAL) +
+                `: ${props.max}`,
+            helperWhenFocused: true,
+            inputType: 'number',
+            max: props.max,
+            min: 1,
+        },
+    };
+    return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null, h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null, h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }), props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), styling: FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
 };
 function getPageItems(props, maxNumberOfPage) {
-  const pageItems = [];
-  for (let i = 1; i <= maxNumberOfPage; i++) {
-    const selected = i == props.currentPage;
-    pageItems.push({
-      id: i.toString(),
-      selected: selected,
-      value: i.toString(),
-    });
-  }
-  return pageItems;
+    const pageItems = [];
+    for (let i = 1; i <= maxNumberOfPage; i++) {
+        const selected = i == props.currentPage;
+        pageItems.push({
+            id: i.toString(),
+            selected: selected,
+            value: i.toString(),
+        });
+    }
+    return pageItems;
 }
 function getRowsItems(props) {
-  const rowsPerPageItems = [];
-  let i = props.perPage;
-  if (i === 0) {
-    return rowsPerPageItems;
-  }
-  while (i < props.max) {
-    const selected = i == props.perPage;
+    const rowsPerPageItems = [];
+    let i = props.perPage;
+    if (i === 0) {
+        return rowsPerPageItems;
+    }
+    while (i < props.max) {
+        const selected = i == props.perPage;
+        rowsPerPageItems.push({
+            id: i.toString(),
+            selected: selected,
+            value: i.toString(),
+        });
+        i = i * 2;
+    }
+    const selected = props.max == props.perPage;
     rowsPerPageItems.push({
-      id: i.toString(),
-      selected: selected,
-      value: i.toString(),
+        id: props.max.toString(),
+        selected: selected,
+        value: props.max.toString(),
     });
-    i = i * 2;
-  }
-  const selected = props.max == props.perPage;
-  rowsPerPageItems.push({
-    id: props.max.toString(),
-    selected: selected,
-    value: props.max.toString(),
-  });
-  return rowsPerPageItems;
+    return rowsPerPageItems;
 }
 function isNextPageDisabled(props) {
-  return props.currentPage * props.perPage >= props.max;
+    return props.currentPage * props.perPage >= props.max;
 }
 function isPrevPageDisabled(props) {
-  return props.currentPage == 1;
+    return props.currentPage == 1;
 }