@sme.up/ketchup 6.1.0-SNAPSHOT → 6.2.0-SNAPSHOT

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

@@ -228,6 +228,16 @@ export class KupObjects {
       !this.isRadio(obj) &&
       !this.isChart(obj));
   }
+  /**
+   * Checks whether the object represents a switch or not.
+   * @param {KupObj} obj - Object to check.
+   * @returns {boolean} True when the object is a switch.
+   */
+  isSwitch(obj) {
+    if (!obj)
+      return false;
+    return 'V2' === obj.t && 'ONOFF' === obj.p;
+  }
   /**
    * Checks whether the object represents a text field or not.
    * @param {KupObj} obj - Object to check.

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

@@ -12,9 +12,10 @@ export const fButtonUsers = [
   KupTagNames.BOX,
   KupTagNames.CALENDAR,
   KupTagNames.CARD,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
-  KupTagNames.FORM_EDITOR,
+  KupTagNames.FORM,
   KupTagNames.IMAGE_LIST,
   KupTagNames.SNACKBAR,
 ];
@@ -25,6 +26,7 @@ export const fCellUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -34,7 +36,9 @@ export const fCheckboxUsers = [
   KupTagNames.BOX,
   KupTagNames.CELL,
   KupTagNames.CHECKBOX,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.LIST,
   KupTagNames.TREE,
 ];
@@ -47,6 +51,7 @@ export const fChipUsers = [
   KupTagNames.CELL,
   KupTagNames.CHIP,
   KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
   KupTagNames.TREE,
 ];
 /**
@@ -62,9 +67,10 @@ export const fImageUsers = [
   KupTagNames.CARD,
   KupTagNames.CELL,
   KupTagNames.CHIP,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
-  KupTagNames.FORM_EDITOR,
+  KupTagNames.FORM,
   KupTagNames.IMAGE,
   KupTagNames.IMAGE_LIST,
   KupTagNames.LIST,
@@ -80,7 +86,14 @@ export const fPaginatorUsers = [KupTagNames.BOX, KupTagNames.DATA_TABLE];
 /**
  * Components using the FSwitch functional component.
  */
-export const fSwitchUsers = [KupTagNames.SWITCH];
+export const fSwitchUsers = [
+  KupTagNames.BOX,
+  KupTagNames.CELL,
+  KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
+  KupTagNames.SWITCH,
+  KupTagNames.TREE,
+];
 /**
  * Components using the FTextField functional component.
  */
@@ -90,8 +103,10 @@ export const fTextFieldUsers = [
   KupTagNames.CELL,
   KupTagNames.COLOR_PICKER,
   KupTagNames.COMBOBOX,
+  KupTagNames.DASHBOARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DATE_PICKER,
+  KupTagNames.FORM,
   KupTagNames.NUMERIC_PICKER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,

package/dist/collection/types/GenericTypes.js

@@ -19,12 +19,13 @@ export var KupTagNames;
   KupTagNames["COMBOBOX"] = "KUP-COMBOBOX";
   KupTagNames["DASH"] = "KUP-DASH";
   KupTagNames["DASH_LIST"] = "KUP-DASH-LIST";
+  KupTagNames["DASHBOARD"] = "KUP-DASHBOARD";
   KupTagNames["DATA_TABLE"] = "KUP-DATA-TABLE";
   KupTagNames["DATE_PICKER"] = "KUP-DATE-PICKER";
   KupTagNames["DRAWER"] = "KUP-DRAWER";
   KupTagNames["DROPDOWN_BUTTON"] = "KUP-DROPDOWN-BUTTON";
   KupTagNames["FIELD"] = "KUP-FIELD";
-  KupTagNames["FORM_EDITOR"] = "KUP-FORM-EDITOR";
+  KupTagNames["FORM"] = "KUP-FORM";
   KupTagNames["GAUGE"] = "KUP-GAUGE";
   KupTagNames["GRID"] = "KUP-GRID";
   KupTagNames["IFRAME"] = "KUP-IFRAME";

package/dist/esm/{cell-utils-964da6b5.js → cell-utils-7fc84d4e.js}

@@ -1,5 +1,5 @@
-import { u as unformattedStringToFormattedStringNumber, d as unformattedStringToFormattedStringTime, e as unformattedStringToFormattedStringTimestamp, h as stringToNumber } from './utils-d7e4b3c2.js';
-import { d as KupDatesFormats } from './kup-manager-58b075b4.js';
+import { u as unformattedStringToFormattedStringNumber, d as unformattedStringToFormattedStringTime, e as unformattedStringToFormattedStringTimestamp, h as stringToNumber } from './utils-6373a07e.js';
+import { d as KupDatesFormats } from './kup-manager-3325b2d8.js';
 
 const dom = document.documentElement;
 // -------------

package/dist/esm/{f-button-871a544b.js → f-button-2f6cc296.js}

@@ -1,6 +1,6 @@
-import { h } from './index-baeab1ac.js';
+import { h } from './index-ad6ab214.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-c468d8ae.js';
+import { F as FImage } from './f-image-b08ebeb2.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -58,7 +58,7 @@ function renderButton(props) {
   const styleSpinnerContainer = {
     '--kup_button_spinner_height': propsFImage.sizeY,
   };
-  return (h("button", { class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, type: "button" },
+  return (h("button", { class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title, type: "button" },
     props.trailingIcon
       ? [
         h("span", { class: classLabelObj }, props.label),
@@ -93,7 +93,7 @@ function renderIconButton(props) {
   const iconOff = props.iconOff
     ? props.iconOff
     : props.icon + '_border';
-  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", value: props.checked ? 'on' : 'off' },
+  return (h("button", { class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, type: "button", 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" },

package/dist/esm/{f-cell-521ef17a.js → f-cell-4428481c.js}

@@ -1,180 +1,26 @@
-import { V as KupTagNames, b as KupThemeColorValues } from './kup-manager-58b075b4.js';
-import { h } from './index-baeab1ac.js';
-import { c as getCellValueForDisplay } from './cell-utils-964da6b5.js';
-import { F as FTextField } from './f-text-field-d6c61c73.js';
-import { h as stringToNumber } from './utils-d7e4b3c2.js';
-import { F as FImage } from './f-image-c468d8ae.js';
-import { a as FChip } from './f-chip-1dda722f.js';
+import { Y as editableTypes, Z as kupTypes, b as KupThemeColorValues, _ as FCellTypes, W as KupTagNames, $ as fullWidthFieldsComps, a0 as FCellClasses, a1 as autoCenterComps, a2 as FCellEvents } from './kup-manager-3325b2d8.js';
+import { h } from './index-ad6ab214.js';
+import { c as getCellValueForDisplay } from './cell-utils-7fc84d4e.js';
+import { F as FCheckbox } from './f-checkbox-c51c4a75.js';
+import { F as FTextField } from './f-text-field-184a5fb3.js';
+import { h as stringToNumber } from './utils-6373a07e.js';
+import { F as FImage } from './f-image-b08ebeb2.js';
+import { a as FChip } from './f-chip-b39eb49a.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-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 }),
+const FSwitch = (props) => {
+  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: 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)));
+      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))));
 };
 
-const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
-/**
- * Supported cell events.
- */
-var FCellEvents;
-(function (FCellEvents) {
-  FCellEvents["CLICK"] = "kup-cell-click";
-  FCellEvents["ICON_CLICK"] = "kup-cell-iconclick";
-  FCellEvents["INPUT"] = "kup-cell-input";
-  FCellEvents["UPDATE"] = "kup-cell-update";
-})(FCellEvents || (FCellEvents = {}));
-/**
- * Supported cell padding.
- */
-var FCellPadding;
-(function (FCellPadding) {
-  FCellPadding["DENSE"] = "dense";
-  FCellPadding["MEDIUM"] = "medium";
-  FCellPadding["NONE"] = "";
-  FCellPadding["WIDE"] = "wide";
-})(FCellPadding || (FCellPadding = {}));
-/**
- * Supported cell CSS classes.
- */
-var FCellClasses;
-(function (FCellClasses) {
-  FCellClasses["BG_DANGER"] = "danger-bg";
-  FCellClasses["BG_GREEN"] = "green-bg";
-  FCellClasses["BG_GREY"] = "grey-bg";
-  FCellClasses["BG_ORANGE"] = "orange-bg";
-  FCellClasses["BG_PURPLE"] = "purple-bg";
-  FCellClasses["BG_SUCCESS"] = "success-bg";
-  FCellClasses["BG_TEAL"] = "teal-bg";
-  FCellClasses["BG_WARNING"] = "warning-bg";
-  FCellClasses["C_BG_DANGER"] = "c-danger-bg";
-  FCellClasses["C_BG_GREEN"] = "c-green-bg";
-  FCellClasses["C_BG_GREY"] = "c-grey-bg";
-  FCellClasses["C_BG_ORANGE"] = "c-orange-bg";
-  FCellClasses["C_BG_PURPLE"] = "c-purple-bg";
-  FCellClasses["C_BG_SUCCESS"] = "c-success-bg";
-  FCellClasses["C_BG_TEAL"] = "c-teal-bg";
-  FCellClasses["C_BG_WARNING"] = "c-warning-bg";
-  FCellClasses["C_CENTERED"] = "c-centered";
-  FCellClasses["C_FITTED"] = "c-fitted";
-  FCellClasses["C_PADDED"] = "c-padded";
-  FCellClasses["C_PADDED_HOR"] = "c-padded-hor";
-  FCellClasses["C_PADDED_VER"] = "c-padded-ver";
-  FCellClasses["C_ROUND"] = "c-round";
-  FCellClasses["C_RIGHT_ALIGNED"] = "c-right-aligned";
-  FCellClasses["C_SHAPED"] = "c-shaped";
-  FCellClasses["C_TEXT_VERTICAL"] = "c-vertical-text";
-  FCellClasses["CLICKABLE"] = "clickable";
-  FCellClasses["HOVER_DISPLAY"] = "display-on-hover";
-  FCellClasses["HOVER_EXPAND"] = "expand-on-hover";
-  FCellClasses["HOVER_REDUCE"] = "reduce-on-hover";
-  FCellClasses["INDICATOR_TOPRIGHT"] = "top-right-indicator";
-  FCellClasses["LINK"] = "link";
-  FCellClasses["MONOSPACE"] = "monospace";
-  FCellClasses["OBJ"] = "obj";
-  FCellClasses["SHAPED"] = "shaped";
-  FCellClasses["TEXT_DANGER"] = "danger-text";
-  FCellClasses["TEXT_INFO"] = "info-text";
-  FCellClasses["TEXT_PRIMARY"] = "primary-text";
-  FCellClasses["TEXT_PURPLE"] = "purple-text";
-  FCellClasses["TEXT_SECONDARY"] = "secondary-text";
-  FCellClasses["TEXT_STRONG"] = "strong-text";
-  FCellClasses["TEXT_SUCCESS"] = "success-text";
-  FCellClasses["TEXT_WARNING"] = "warning-text";
-  FCellClasses["UNDERLINED"] = "underlined";
-})(FCellClasses || (FCellClasses = {}));
-/**
- * Supported cell shapes.
- */
-var FCellShapes;
-(function (FCellShapes) {
-  FCellShapes["AUTOCOMPLETE"] = "ACP";
-  FCellShapes["BUTTON_LIST"] = "BTN";
-  FCellShapes["CHART"] = "GRA";
-  FCellShapes["CHECKBOX"] = "CHK";
-  FCellShapes["CHIP"] = "CHI";
-  FCellShapes["COLOR_PICKER"] = "CLP";
-  FCellShapes["COMBOBOX"] = "CMB";
-  FCellShapes["EDITOR"] = "EDT";
-  FCellShapes["GAUGE"] = "GAU";
-  FCellShapes["IMAGE"] = "IMG";
-  FCellShapes["KNOB"] = "KNB";
-  FCellShapes["PROGRESS_BAR"] = "PGB";
-  FCellShapes["RADIO"] = "RAD";
-  FCellShapes["RATING"] = "RTG";
-  FCellShapes["TEXT_FIELD"] = "ITX";
-})(FCellShapes || (FCellShapes = {}));
-/**
- * Supported cell types.
- */
-var FCellTypes;
-(function (FCellTypes) {
-  FCellTypes["AUTOCOMPLETE"] = "autocomplete";
-  FCellTypes["BAR"] = "bar";
-  FCellTypes["BUTTON"] = "button";
-  FCellTypes["BUTTON_LIST"] = "button-list";
-  FCellTypes["CHART"] = "chart";
-  FCellTypes["CHECKBOX"] = "checkbox";
-  FCellTypes["CHIP"] = "chips";
-  FCellTypes["COLOR_PICKER"] = "color-picker";
-  FCellTypes["COMBOBOX"] = "combobox";
-  FCellTypes["DATE"] = "date";
-  FCellTypes["DATETIME"] = "datetime";
-  FCellTypes["EDITOR"] = "editor";
-  FCellTypes["GAUGE"] = "gauge";
-  FCellTypes["ICON"] = "icon";
-  FCellTypes["IMAGE"] = "image";
-  FCellTypes["KNOB"] = "knob";
-  FCellTypes["LINK"] = "link";
-  FCellTypes["NUMBER"] = "number";
-  FCellTypes["PROGRESS_BAR"] = "progress-bar";
-  FCellTypes["RADIO"] = "radio";
-  FCellTypes["RATING"] = "rating";
-  FCellTypes["STRING"] = "string";
-  FCellTypes["TIME"] = "time";
-})(FCellTypes || (FCellTypes = {}));
-const editableTypes = [
-  FCellTypes.AUTOCOMPLETE,
-  FCellTypes.CHECKBOX,
-  FCellTypes.COLOR_PICKER,
-  FCellTypes.COMBOBOX,
-  FCellTypes.DATE,
-  FCellTypes.NUMBER,
-  FCellTypes.RATING,
-  FCellTypes.STRING,
-  FCellTypes.TIME,
-];
-const kupTypes = [
-  FCellTypes.BAR,
-  FCellTypes.BUTTON,
-  FCellTypes.BUTTON_LIST,
-  FCellTypes.CHART,
-  FCellTypes.CHIP,
-  FCellTypes.COLOR_PICKER,
-  FCellTypes.GAUGE,
-  FCellTypes.KNOB,
-  FCellTypes.PROGRESS_BAR,
-  FCellTypes.RADIO,
-  FCellTypes.RATING,
-];
-
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -193,7 +39,7 @@ const FCell = (props, children) => {
   const hasObj = !dom.ketchup.objects.isEmptyKupObj(cell.obj);
   const isEditable = cell.isEditable && props.editable ? true : false;
   const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
-  const cellType = getCellType(cell, shape);
+  const cellType = dom.ketchup.data.cell.getType(cell, shape);
   const subcomponentProps = Object.assign({}, cell.data);
   let cssClasses = cell.cssClass
     ? cell.cssClass
@@ -368,27 +214,28 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
 function setEditableCell(cellType, classObj, cell, column, props) {
   switch (cellType) {
     case FCellTypes.AUTOCOMPLETE:
-      return (h("kup-autocomplete", Object.assign({}, cell.data, { class: "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({ 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 (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      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({}, cell.data, { class: "kup-full-width", disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+      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) })));
     case FCellTypes.COMBOBOX:
-      return (h("kup-combobox", Object.assign({}, cell.data, { class: "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({ 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: "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({ 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) })));
+    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: "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({ 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:
-      return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: true, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
+      return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: isFullWidth(props) ? true : false, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
           ? stringToNumber(cell.value).toString()
           : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
   }
@@ -406,8 +253,7 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
       }
       return content;
     case FCellTypes.CHECKBOX:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h(FImage, { resource: subcomponentProps.checked
@@ -417,8 +263,7 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
       return h("div", { innerHTML: cell.value });
     case FCellTypes.ICON:
     case FCellTypes.IMAGE:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       if (subcomponentProps.badgeData) {
@@ -434,13 +279,18 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
         if (cellValueNumber < 0) {
           classObj[FCellClasses.TEXT_DANGER] = true;
         }
-        if (autoAlignComps.includes(props.component.rootElement
-          .tagName)) {
+        if (isAutoCentered(props)) {
           classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
         }
         return h("div", { class: "f-cell__text" }, cellValue);
       }
       return h("div", { class: "f-cell__text" }, content);
+    case FCellTypes.SWITCH:
+      if (isAutoCentered(props)) {
+        classObj[FCellClasses.C_CENTERED] = true;
+      }
+      subcomponentProps['disabled'] = true;
+      return h(FSwitch, Object.assign({}, subcomponentProps));
     default:
       return h("div", { class: "f-cell__text" }, content);
   }
@@ -460,14 +310,12 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
           h(FImage, Object.assign({}, subcomponentProps))));
       }
     case FCellTypes.BUTTON:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      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) })));
     case FCellTypes.BUTTON_LIST:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['data-storage'] = {
@@ -477,23 +325,21 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       };
       return h("kup-button-list", Object.assign({}, subcomponentProps));
     case FCellTypes.CHART:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return h("kup-chart", Object.assign({}, subcomponentProps));
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({}, subcomponentProps, { class: "kup-full-width", disabled: true })));
+      return (h("kup-color-picker", Object.assign({}, 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)));
     case FCellTypes.KNOB:
     case FCellTypes.PROGRESS_BAR:
       return h("kup-progress-bar", Object.assign({}, subcomponentProps));
     case FCellTypes.RADIO:
-      if (autoAlignComps.includes(props.component.rootElement
-        .tagName)) {
+      if (isAutoCentered(props)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['disabled'] = row.readOnly;
@@ -502,94 +348,6 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       return h("kup-rating", Object.assign({}, subcomponentProps, { disabled: true }));
   }
 }
-function getCellType(cell, shape) {
-  const obj = cell.obj;
-  if (shape) {
-    switch (shape.toUpperCase()) {
-      case FCellShapes.AUTOCOMPLETE:
-        return FCellTypes.AUTOCOMPLETE;
-      case FCellShapes.BUTTON_LIST:
-        return FCellTypes.BUTTON_LIST;
-      case FCellShapes.CHART:
-        return FCellTypes.CHART;
-      case FCellShapes.CHECKBOX:
-        return FCellTypes.CHECKBOX;
-      case FCellShapes.CHIP:
-        return FCellTypes.CHIP;
-      case FCellShapes.COLOR_PICKER:
-        return FCellTypes.COLOR_PICKER;
-      case FCellShapes.COMBOBOX:
-        return FCellTypes.COMBOBOX;
-      case FCellShapes.EDITOR:
-        return FCellTypes.EDITOR;
-      case FCellShapes.GAUGE:
-        return FCellTypes.GAUGE;
-      case FCellShapes.IMAGE:
-        return FCellTypes.IMAGE;
-      case FCellShapes.KNOB:
-        return FCellTypes.KNOB;
-      case FCellShapes.PROGRESS_BAR:
-        return FCellTypes.PROGRESS_BAR;
-      case FCellShapes.RADIO:
-        return FCellTypes.RADIO;
-      case FCellShapes.RATING:
-        return FCellTypes.RATING;
-      case FCellShapes.TEXT_FIELD:
-        return FCellTypes.STRING;
-    }
-  }
-  if (dom.ketchup.objects.isBar(obj)) {
-    return FCellTypes.BAR;
-  }
-  else if (dom.ketchup.objects.isButton(obj)) {
-    return FCellTypes.BUTTON;
-  }
-  else if (dom.ketchup.objects.isChart(obj)) {
-    return FCellTypes.CHART;
-  }
-  else if (dom.ketchup.objects.isCheckbox(obj)) {
-    return FCellTypes.CHECKBOX;
-  }
-  else if (dom.ketchup.objects.isColor(obj)) {
-    return FCellTypes.COLOR_PICKER;
-  }
-  else if (dom.ketchup.objects.isIcon(obj)) {
-    return FCellTypes.ICON;
-  }
-  else if (dom.ketchup.objects.isImage(obj)) {
-    return FCellTypes.IMAGE;
-  }
-  else if (dom.ketchup.objects.isLink(obj)) {
-    return FCellTypes.LINK;
-  }
-  else if (dom.ketchup.objects.isProgressBar(obj)) {
-    return FCellTypes.PROGRESS_BAR;
-  }
-  else if (dom.ketchup.objects.isRadio(obj)) {
-    return FCellTypes.RADIO;
-  }
-  else if (dom.ketchup.objects.isKupObjList(obj)) {
-    return FCellTypes.CHIP;
-  }
-  else if (dom.ketchup.objects.isNumber(obj)) {
-    return FCellTypes.NUMBER;
-  }
-  else if (dom.ketchup.objects.isDate(obj)) {
-    return FCellTypes.DATE;
-  }
-  else if (dom.ketchup.objects.isTimestamp(obj)) {
-    return FCellTypes.DATETIME;
-  }
-  else if (dom.ketchup.objects.isTime(obj)) {
-    return FCellTypes.TIME;
-  }
-  else if (dom.ketchup.objects.isVoCodver(obj)) {
-    return FCellTypes.ICON;
-  }
-  else {
-    return FCellTypes.STRING;
-  }
-}
 function cellEvent(e, props, cellType, cellEventName) {
   const cell = props.cell;
   const column = props.column;
@@ -610,6 +368,7 @@ function cellEvent(e, props, cellType, cellEventName) {
         }
         break;
       case FCellTypes.CHECKBOX:
+      case FCellTypes.SWITCH:
         value = value === 'on' ? '0' : '1';
         if (cell.data) {
           cell.data.checked =
@@ -645,6 +404,12 @@ function cellEvent(e, props, cellType, cellEventName) {
     }
     catch (error) { }
   }
+}
+function isAutoCentered(props) {
+  return autoCenterComps.includes(props.component.rootElement.tagName);
+}
+function isFullWidth(props) {
+  return fullWidthFieldsComps.includes(props.component.rootElement.tagName);
 }
 
-export { FCheckbox as F, FCellPadding as a, FCell as b };
+export { FCell as F, FSwitch as a };

package/dist/esm/f-checkbox-c51c4a75.js

@@ -0,0 +1,27 @@
+import { h } from './index-ad6ab214.js';
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+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)));
+};
+
+export { FCheckbox as F };

package/dist/esm/{f-chip-1dda722f.js → f-chip-b39eb49a.js}

@@ -1,6 +1,6 @@
-import { h } from './index-baeab1ac.js';
-import { F as FImage } from './f-image-c468d8ae.js';
-import { a as KupThemeIconValues, h as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-58b075b4.js';
+import { h } from './index-ad6ab214.js';
+import { F as FImage } from './f-image-b08ebeb2.js';
+import { K as KupThemeIconValues, h as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-3325b2d8.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-c468d8ae.js → f-image-b08ebeb2.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-baeab1ac.js';
-import { b as KupThemeColorValues } from './kup-manager-58b075b4.js';
+import { h, a as getAssetPath } from './index-ad6ab214.js';
+import { b as KupThemeColorValues } from './kup-manager-3325b2d8.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.

package/dist/esm/{f-paginator-utils-7dff8ff0.js → f-paginator-utils-4fda6086.js}

@@ -1,8 +1,8 @@
-import { V as KupTagNames, d as KupDatesFormats, r as KupDatesNormalize, s as KupObjects, J as SortMode, T as TotalMode, W as KupLanguagePage, n as KupLanguageRow, h as KupLanguageGeneric } from './kup-manager-58b075b4.js';
-import { b as isValidFormattedStringTime, f as formattedStringToCustomUnformattedStringTime, j as formattedStringToDefaultUnformattedStringTimestamp, k as isValidFormattedStringNumber, l as formattedStringToUnformattedStringNumber, m as unformattedStringNumberToNumber, h as stringToNumber, o as isNumber } from './utils-d7e4b3c2.js';
-import { b as getValueForDisplay, a as getValueForDisplay2, c as getCellValueForDisplay, g as getColumnByName, d as compareValues, e as compareCell } from './cell-utils-964da6b5.js';
-import { h } from './index-baeab1ac.js';
-import { F as FButton } from './f-button-871a544b.js';
+import { W as KupTagNames, d as KupDatesFormats, r as KupDatesNormalize, s as KupObjects, M as SortMode, T as TotalMode, X as KupLanguagePage, n as KupLanguageRow, h as KupLanguageGeneric } from './kup-manager-3325b2d8.js';
+import { b as isValidFormattedStringTime, f as formattedStringToCustomUnformattedStringTime, j as formattedStringToDefaultUnformattedStringTimestamp, k as isValidFormattedStringNumber, l as formattedStringToUnformattedStringNumber, m as unformattedStringNumberToNumber, h as stringToNumber, o as isNumber } from './utils-6373a07e.js';
+import { b as getValueForDisplay, a as getValueForDisplay2, c as getCellValueForDisplay, g as getColumnByName, d as compareValues, e as compareCell } from './cell-utils-7fc84d4e.js';
+import { h } from './index-ad6ab214.js';
+import { F as FButton } from './f-button-2f6cc296.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
 
 /**