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

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

@@ -7,7 +7,7 @@
     --kup-photoframe-border,
     1px inset var(--kup-border-color)
   );
-  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 3000ms);
+  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 2000ms);
   border: var(--kup_photoframe_border);
   display: block;
   height: 100%;
@@ -35,19 +35,22 @@ img {
 }
 
 .placeholder {
-  opacity: 1;
+  display: none;
   transition: opacity var(--kup_photoframe_fade_out_time) ease-out;
-  z-index: 1;
+  will-change: opacity;
+}
+.placeholder--loaded {
+  display: block;
 }
 .placeholder--fade-out {
+  left: 0;
   opacity: 0;
+  position: absolute;
+  top: 0;
 }
 
 .resource {
-  left: 0;
-  position: absolute;
-  top: 0;
-  z-index: -1;
+  display: block;
 }
 
 /*-------------------------------------------------*/

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

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_resourceEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
+var _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
 import { Component, Element, Event, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
 import { Method } from '@stencil/core/internal';
 import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
@@ -52,7 +52,6 @@ export class KupPhotoFrame {
     _KupPhotoFrame_intObserver.set(this, null);
     _KupPhotoFrame_kupManager.set(this, kupManagerInstance());
     _KupPhotoFrame_placeholderEl.set(this, null);
-    _KupPhotoFrame_resourceEl.set(this, null);
     _KupPhotoFrame_renderResource.set(this, false);
     _KupPhotoFrame_wrapperEl.set(this, null);
   }
@@ -138,8 +137,7 @@ export class KupPhotoFrame {
               id: this.rootElement.id,
             });
           } })),
-        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_resourceEl, el, "f")), onLoad: () => {
-            __classPrivateFieldGet(this, _KupPhotoFrame_resourceEl, "f").classList.add('resource--fade-in');
+        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", onLoad: () => {
             __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--fade-out');
             this.kupPhotoFrameResourceLoad.emit({
               comp: this,
@@ -379,4 +377,4 @@ export class KupPhotoFrame {
   }; }
   static get elementRef() { return "rootElement"; }
 }
-_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_resourceEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();
+_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();

package/dist/collection/components/kup-text-field/kup-text-field-declarations.js

@@ -17,7 +17,10 @@ export var KupTextFieldProps;
   KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
   KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
+  KupTextFieldProps["max"] = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
   KupTextFieldProps["maxLength"] = "When set, the helper will display a character counter.";
+  KupTextFieldProps["min"] = "The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
+  KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";

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

@@ -102,6 +102,11 @@ export class KupTextField {
      * @default null
      */
     this.min = null;
+    /**
+     * The HTML name attribute used for form autocomplete.
+     * @default null
+     */
+    this.name = null;
     /**
      * When set to true, the component will be rendered as an outlined field.
      * @default false
@@ -305,6 +310,7 @@ export class KupTextField {
       max: this.max,
       maxLength: this.maxLength,
       min: this.min,
+      name: this.name,
       outlined: this.outlined,
       readOnly: this.readOnly,
       secondary: this.rootElement.classList.contains('kup-secondary')
@@ -689,6 +695,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "null"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "The HTML name attribute used for form autocomplete."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "outlined": {
       "type": "boolean",
       "mutable": false,

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

@@ -61,12 +61,6 @@ export class KupTimePicker {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    this.hoursEl = undefined;
-    this.minutesEl = undefined;
-    this.secondsEl = undefined;
-    this.hoursCircleEl = undefined;
-    this.minutesCircleEl = undefined;
-    this.secondsCircleEl = undefined;
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;

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

@@ -19,6 +19,7 @@ import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-d
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -189,7 +190,6 @@ export class KupTree {
     if (this.store && this.stateId) {
       const state = this.store.getState(this.stateId);
       if (state != null) {
-        console.log('Initialize with state for stateId ' + this.stateId, state);
         this.density = state.density;
         this.showFilters = state.showFilters;
         this.showFooter = state.showFooter;
@@ -236,7 +236,6 @@ export class KupTree {
         return;
       }
       if (somethingChanged) {
-        console.log('Persisting state for stateId ' + this.stateId + ': ', this.state);
         this.store.persistState(this.stateId, this.state);
       }
     }
@@ -545,7 +544,7 @@ export class KupTree {
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(path) {
+  getEventDetails(path, e) {
     let isHeader, isBody, isFooter, td, th, tr, filterRemove;
     if (path) {
       for (let i = path.length - 1; i >= 0; i--) {
@@ -617,6 +616,7 @@ export class KupTree {
       cell: cell ? cell : null,
       column: column ? column : null,
       filterRemove: filterRemove ? filterRemove : null,
+      originalEvent: e,
       row: row ? row : null,
       td: td ? td : null,
       th: th ? th : null,
@@ -625,7 +625,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(this.getEventPath(e.target));
+    const details = this.getEventDetails(this.getEventPath(e.target), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -1373,6 +1373,12 @@ export class KupTree {
         }
       }
     }
+    if (root) {
+      const fs = root.querySelectorAll('.f-text-field');
+      for (let index = 0; index < fs.length; index++) {
+        FTextFieldMDC(fs[index]);
+      }
+    }
     if (this.preventXScroll) {
       this.setEllipsis();
     }

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

@@ -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/collection/f-components/f-cell/f-cell-declarations.js

@@ -1,5 +1,6 @@
 import { KupTagNames, } from '../../types/GenericTypes';
-export const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+export const autoCenterComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+export const fullWidthFieldsComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
  * Supported cell events.
  */
@@ -88,6 +89,7 @@ export var FCellShapes;
   FCellShapes["PROGRESS_BAR"] = "PGB";
   FCellShapes["RADIO"] = "RAD";
   FCellShapes["RATING"] = "RTG";
+  FCellShapes["SWITCH"] = "SWT";
   FCellShapes["TEXT_FIELD"] = "ITX";
 })(FCellShapes || (FCellShapes = {}));
 /**
@@ -117,6 +119,7 @@ export var FCellTypes;
   FCellTypes["RADIO"] = "radio";
   FCellTypes["RATING"] = "rating";
   FCellTypes["STRING"] = "string";
+  FCellTypes["SWITCH"] = "switch";
   FCellTypes["TIME"] = "time";
 })(FCellTypes || (FCellTypes = {}));
 export const editableTypes = [
@@ -128,6 +131,7 @@ export const editableTypes = [
   FCellTypes.NUMBER,
   FCellTypes.RATING,
   FCellTypes.STRING,
+  FCellTypes.SWITCH,
   FCellTypes.TIME,
 ];
 export const kupTypes = [

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

@@ -1,5 +1,5 @@
-import { KupTagNames } from '../../types/GenericTypes';
-import { autoAlignComps, editableTypes, FCellClasses, FCellEvents, FCellShapes, FCellTypes, kupTypes, } from './f-cell-declarations';
+import { KupTagNames, } from '../../types/GenericTypes';
+import { autoCenterComps, editableTypes, FCellClasses, FCellEvents, FCellTypes, fullWidthFieldsComps, kupTypes, } from './f-cell-declarations';
 import { h } from '@stencil/core';
 import { getCellValueForDisplay } from '../../utils/cell-utils';
 import { FCheckbox } from '../f-checkbox/f-checkbox';
@@ -8,6 +8,7 @@ import { stringToNumber } from '../../utils/utils';
 import { FImage } from '../f-image/f-image';
 import { FChip } from '../f-chip/f-chip';
 import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { FSwitch } from '../f-switch/f-switch';
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -26,7 +27,7 @@ export 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
@@ -201,27 +202,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) })));
   }
@@ -239,8 +241,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
@@ -250,8 +251,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) {
@@ -267,13 +267,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);
   }
@@ -293,14 +298,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'] = {
@@ -310,23 +313,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;
@@ -335,94 +336,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;
@@ -443,6 +356,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 =
@@ -479,3 +393,9 @@ 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);
+}

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

@@ -55,7 +55,7 @@ function setContent(props) {
       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", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, 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("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", { 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.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, 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,

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

@@ -5,6 +5,7 @@ import { findRow, toNode } from './kup-data-row-helper';
 import { getParentNode, removeNode, setPropertiesNode, toStreamNode, } from './kup-data-node-helper';
 import { fieldColumn } from '../../components/kup-data-table/kup-data-table-declarations';
 import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
+import { FCellShapes, FCellTypes, } from '../../f-components/f-cell/f-cell-declarations';
 const dom = document.documentElement;
 /**
  * Handles data operations.
@@ -22,6 +23,99 @@ export class KupData {
       replace(dataset, cell, columns) {
         return replaceCell(dataset, cell, columns);
       },
+      getType(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.SWITCH:
+              return FCellTypes.SWITCH;
+            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.isSwitch(obj)) {
+          return FCellTypes.SWITCH;
+        }
+        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;
+        }
+      },
     };
     this.column = {
       find(dataset, filters) {

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

@@ -36,6 +36,17 @@ export var KupLanguageColumn;
   KupLanguageColumn["NON_NUMERICAL_IN_TABLE"] = "columnNonNumericalInTable";
   KupLanguageColumn["SWAP"] = "columnSwap";
 })(KupLanguageColumn || (KupLanguageColumn = {}));
+/**
+ * Dashboard related decodes.
+ */
+export var KupLanguageDashboard;
+(function (KupLanguageDashboard) {
+  KupLanguageDashboard["DIMENSION"] = "dashboardDimension";
+  KupLanguageDashboard["LOADED"] = "dashboardLoaded";
+  KupLanguageDashboard["RESET"] = "dashboardReset";
+  KupLanguageDashboard["SAVE"] = "dashboardSave";
+  KupLanguageDashboard["VERTICAL"] = "dashboardVertical";
+})(KupLanguageDashboard || (KupLanguageDashboard = {}));
 /**
  * Debug widget decodes.
  */