@sme.up/ketchup 6.5.0 → 6.7.0

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

@@ -16,9 +16,7 @@ export const FButton = (props, children) => {
     (props.styling.toLowerCase() === FButtonStyling.RAISED &&
       props.icon &&
       (props.label === null || props.label === undefined)));
-  return (h("div", Object.assign({ class: `f-button ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    isIconButton ? renderIconButton(props) : renderButton(props),
-    children));
+  return (h("div", Object.assign({ class: `f-button ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), isIconButton ? renderIconButton(props) : renderButton(props), children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
@@ -58,18 +56,15 @@ function renderButton(props) {
   const styleSpinnerContainer = {
     '--kup_button_spinner_height': propsFImage.sizeY,
   };
-  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title },
-    props.trailingIcon
-      ? [
-        h("span", { class: classLabelObj }, props.label),
-        props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
-      ]
-      : [
-        props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
-        h("span", { class: classLabelObj }, props.label),
-      ],
-    props.showSpinner && !props.disabled ? (h("div", { class: "button__spinner-container" },
-      h("slot", { name: "spinner" }))) : undefined));
+  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title }, props.trailingIcon
+    ? [
+      h("span", { class: classLabelObj }, props.label),
+      props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
+    ]
+    : [
+      props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
+      h("span", { class: classLabelObj }, props.label),
+    ], props.showSpinner && !props.disabled ? (h("div", { class: "button__spinner-container" }, h("slot", { name: "spinner" }))) : undefined));
 }
 function renderIconButton(props) {
   const propsFImage = {
@@ -93,9 +88,5 @@ function renderIconButton(props) {
   const iconOff = props.iconOff
     ? props.iconOff
     : props.icon + '_border';
-  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title },
-    !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null,
-    props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null,
-    props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" },
-      h("slot", { name: "spinner" }))) : undefined));
+  return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title }, !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null, props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null, props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" }, h("slot", { name: "spinner" }))) : undefined));
 }

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

@@ -103,10 +103,9 @@ export const FCell = (props, children) => {
   }
   return (h("div", { class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style },
-    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
-      ? children
-      : [props.indents, infoEl, icon, content])));
+    }, style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+    ? children
+    : [props.indents, infoEl, icon, content])));
 };
 function setCellSize(cellType, subcomponentProps, cell, props) {
   switch (cellType) {
@@ -202,24 +201,24 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
 function setEditableCell(cellType, classObj, cell, column, props) {
   switch (cellType) {
     case FCellTypes.AUTOCOMPLETE:
-      return (h("kup-autocomplete", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
+      return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
     case FCellTypes.CHECKBOX:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+      return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.COMBOBOX:
-      return (h("kup-combobox", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
+      return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
     case FCellTypes.DATE:
-      return (h("kup-date-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+      return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.RATING:
-      return (h("kup-rating", Object.assign({}, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.SWITCH:
       return (h(FSwitch, Object.assign({}, cell.data, { disabled: false, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.TIME:
-      return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+      return (h("kup-time-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.NUMBER:
       classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.STRING:
@@ -287,21 +286,20 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
   switch (cellType) {
     case FCellTypes.BAR:
       if (!subcomponentProps.data) {
-        return h("kup-image", Object.assign({}, subcomponentProps));
+        return (h("kup-image", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
       }
       else {
         const barStyle = {
           height: subcomponentProps.sizeY,
           width: '100%',
         };
-        return (h("div", { style: barStyle },
-          h(FImage, Object.assign({}, subcomponentProps))));
+        return (h("div", { style: barStyle }, h(FImage, Object.assign({}, subcomponentProps))));
       }
     case FCellTypes.BUTTON:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
-      return (h("kup-button", Object.assign({}, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
+      return (h("kup-button", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
     case FCellTypes.BUTTON_LIST:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
@@ -311,29 +309,29 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
         row: row,
         column: column,
       };
-      return h("kup-button-list", Object.assign({}, subcomponentProps));
+      return (h("kup-button-list", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
     case FCellTypes.CHART:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
-      return h("kup-chart", Object.assign({}, subcomponentProps));
+      return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({}, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
+      return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
     case FCellTypes.GAUGE:
-      return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
+      return (h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
     case FCellTypes.KNOB:
     case FCellTypes.PROGRESS_BAR:
-      return h("kup-progress-bar", Object.assign({}, subcomponentProps));
+      return (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
     case FCellTypes.RADIO:
       if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['disabled'] = row.readOnly;
-      return h("kup-radio", Object.assign({}, subcomponentProps));
+      return (h("kup-radio", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
     case FCellTypes.RATING:
-      return h("kup-rating", Object.assign({}, subcomponentProps, { disabled: true }));
+      return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { disabled: true })));
   }
 }
 function cellEvent(e, props, cellType, cellEventName) {
@@ -394,8 +392,10 @@ function cellEvent(e, props, cellType, cellEventName) {
   }
 }
 function isAutoCentered(props) {
-  return autoCenterComps.includes(props.component.rootElement.tagName);
+  var _a;
+  return autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }
 function isFullWidth(props) {
-  return fullWidthFieldsComps.includes(props.component.rootElement.tagName);
+  var _a;
+  return fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }

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

@@ -12,13 +12,5 @@ export const FCheckbox = (props) => {
     '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)));
+  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.js

@@ -20,8 +20,7 @@ export const FChip = (props) => {
     '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))));
+  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                  */
@@ -40,16 +39,13 @@ function createChipList(props, isChoice, isFilter, isInput) {
       };
       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)));
+          : ''}` }, 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]) {
@@ -84,28 +80,19 @@ function createChipList(props, isChoice, isFilter, isInput) {
         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" }))));
+        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" }, 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));
+          : 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" }, 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;

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

@@ -38,9 +38,7 @@ export const FImage = (props) => {
       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                  */

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

@@ -41,12 +41,7 @@ export const FPaginator = (props) => {
       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));
+  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 = [];

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

@@ -8,12 +8,5 @@ export const FSwitch = (props) => {
     'switch--checked': props.checked,
     'switch--disabled': props.disabled,
   };
-  return (h("div", Object.assign({ class: `f-switch ${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: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
-        h("div", { class: "switch__track" }),
-        h("div", { class: "switch__thumb-underlay" },
-          h("div", { class: "switch__thumb" },
-            h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))),
-      h("label", { onClick: props.onChange }, props.label))));
+  return (h("div", Object.assign({ class: `f-switch ${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: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` }, h("div", { class: "switch__track" }), h("div", { class: "switch__thumb-underlay" }, h("div", { class: "switch__thumb" }, h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))), h("label", { onClick: props.onChange }, props.label))));
 };

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

@@ -4,13 +4,11 @@ import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarati
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FTextField = (props, children) => {
-  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
-      setContent(props),
-      setHelper(props),
-      h("label", null, props.label),
-    ])) : ([setContent(props), setHelper(props)]),
-    children));
+  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
+    setContent(props),
+    setHelper(props),
+    h("label", null, props.label),
+  ])) : ([setContent(props), setHelper(props)]), children));
 };
 /*-------------------------------------------------*/
 /*                  M e t h o d s                  */
@@ -49,30 +47,17 @@ function setContent(props) {
     'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
     'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
   };
-  return (h("div", { class: classObj },
-    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
-      "'0 / ' + ",
-      props.maxLength)) : undefined,
-    !props.trailingIcon ? iconEl : undefined,
-    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
-        ? props.label
-        : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
-        if (props.decimals !== null &&
-          props.inputType === 'number') {
-          e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
-        }
-        if (props.onChange) {
-          props.onChange(e);
-        }
-      }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
-    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
-    props.trailingIcon ? iconEl : undefined,
-    !props.fullWidth && !isOutlined ? labelEl : undefined,
-    isOutlined ? (h("div", { class: "mdc-notched-outline" },
-      h("div", { class: "mdc-notched-outline__leading" }),
-      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
-      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
+  return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)) : undefined, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
+      ? props.label
+      : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
+      if (props.decimals !== null &&
+        props.inputType === 'number') {
+        e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
+      }
+      if (props.onChange) {
+        props.onChange(e);
+      }
+    }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })), props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined, props.trailingIcon ? iconEl : undefined, !props.fullWidth && !isOutlined ? labelEl : undefined, isOutlined ? (h("div", { class: "mdc-notched-outline" }, h("div", { class: "mdc-notched-outline__leading" }), h("div", { class: "mdc-notched-outline__notch" }, labelEl), h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
 }
 function setHelper(props) {
   if (props.helperEnabled !== false) {
@@ -81,18 +66,11 @@ function setHelper(props) {
         'mdc-text-field-helper-text': true,
         'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
       };
-      return (h("div", { class: "mdc-text-field-helper-line" },
-        h("div", { class: classObj }, props.helper),
-        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
-          "'0 / ' + ",
-          props.maxLength.toString())) : undefined));
+      return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
     }
     else {
       if (props.maxLength && !props.textArea) {
-        return (h("div", { class: "mdc-text-field-helper-line" },
-          h("div", { class: "mdc-text-field-character-counter" },
-            "'0 / ' + ",
-            props.maxLength)));
+        return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)));
       }
     }
   }

package/dist/collection/managers/kup-debug/kup-debug.js

@@ -1,12 +1,17 @@
 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");
+  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 __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");
+  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 _KupDebug_debugWidget;

package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js

@@ -1,12 +1,17 @@
 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");
+  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 __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");
+  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 _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
@@ -47,8 +52,9 @@ export class KupScrollOnHover {
    * @param {KupScrollOnHoverElement} el - Element to watch.
    * @param {boolean} vertical - Enables vertical scroll.
    * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
+   * @param {number} step - The amount in pixels for each scroll recursion.
    */
-  register(el, vertical, percentages) {
+  register(el, vertical, percentages, step) {
     if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
       __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
     }
@@ -60,6 +66,7 @@ export class KupScrollOnHover {
         ? percentages
         : { back: 0.1, forward: 0.9 },
       rect: null,
+      step: step,
       vertical: vertical || null,
       x: 0,
       y: 0,
@@ -248,7 +255,9 @@ export class KupScrollOnHover {
           this.stop(el);
           return;
         }
-        el.scrollTop += this.step;
+        el.scrollTop += el.scrollOnHover.step
+          ? el.scrollOnHover.step
+          : this.step;
         break;
       }
       case ScrollOnHoverDirection.LEFT: {
@@ -257,7 +266,9 @@ export class KupScrollOnHover {
           this.stop(el);
           return;
         }
-        el.scrollLeft -= this.step;
+        el.scrollLeft -= el.scrollOnHover.step
+          ? el.scrollOnHover.step
+          : this.step;
         break;
       }
       case ScrollOnHoverDirection.RIGHT: {
@@ -266,7 +277,9 @@ export class KupScrollOnHover {
           this.stop(el);
           return;
         }
-        el.scrollLeft += this.step;
+        el.scrollLeft += el.scrollOnHover.step
+          ? el.scrollOnHover.step
+          : this.step;
         break;
       }
       case ScrollOnHoverDirection.TOP: {
@@ -275,7 +288,9 @@ export class KupScrollOnHover {
           this.stop(el);
           return;
         }
-        el.scrollTop -= this.step;
+        el.scrollTop -= el.scrollOnHover.step
+          ? el.scrollOnHover.step
+          : this.step;
         break;
       }
     }

package/dist/collection/managers/kup-theme/kup-theme-declarations.js

@@ -25,6 +25,7 @@ export const fButtonUsers = [
  */
 export const fCellUsers = [
   KupTagNames.BOX,
+  KupTagNames.CARD,
   KupTagNames.CELL,
   KupTagNames.DATA_TABLE,
   KupTagNames.FORM,

package/dist/collection/managers/kup-toolbar/kup-toolbar.js

@@ -1,12 +1,17 @@
 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");
+  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 __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");
+  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 _KupToolbar_keyEvent;

package/dist/collection/managers/kup-tooltip/kup-tooltip.js

@@ -1,12 +1,17 @@
 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");
+  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");
+  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 _KupTooltip_instances, _KupTooltip_clickCb, _KupTooltip_dynPos, _KupTooltip_create, _KupTooltip_setOptions;

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -117,27 +117,6 @@ export class KupColumnMenu {
           : dom.ketchup.language.translate(KupLanguageGrouping.ENABLE),
       });
     }
-    props.push({
-      className: 'printable',
-      customStyle: ':host {--kup-font-size: 0.75em;}',
-      icon: 'open-in-new',
-      id: KupColumnMenuIds.BUTTON_OPEN_IN_NEW,
-      title: dom.ketchup.language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB),
-    });
-    props.push({
-      className: 'printable',
-      customStyle: ':host {--kup-font-size: 0.75em;}',
-      icon: 'search',
-      id: KupColumnMenuIds.BUTTON_SEARCH,
-      title: dom.ketchup.language.translate(KupLanguageGeneric.INFO),
-    });
-    props.push({
-      className: 'printable',
-      customStyle: ':host {--kup-font-size: 0.75em;}',
-      icon: 'add',
-      id: KupColumnMenuIds.BUTTON_NEW,
-      title: dom.ketchup.language.translate(KupLanguageGeneric.ADD_NEW),
-    });
     if (comp.removableColumns) {
       props.push({
         className: 'printable',