@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,17 +1,17 @@
-/**
- * Styling options for the f-button component.
- * @enum {string}
- * @property {string} FLAT - Flat style: no background nor borders.
- * @property {string} FLOATING - Floating action button (FAB) style: round and large.
- * @property {string} ICON - Icon button style: single icon with backdrop and no background.
- * @property {string} OUTLINED - Outlined style: no background with border.
- * @property {string} RAISED - Raised style: no border with solid background.
- */
-export var FButtonStyling;
-(function (FButtonStyling) {
-  FButtonStyling["FLAT"] = "flat";
-  FButtonStyling["FLOATING"] = "floating";
-  FButtonStyling["ICON"] = "icon";
-  FButtonStyling["OUTLINED"] = "outlined";
-  FButtonStyling["RAISED"] = "raised";
-})(FButtonStyling || (FButtonStyling = {}));
+/**
+ * Styling options for the f-button component.
+ * @enum {string}
+ * @property {string} FLAT - Flat style: no background nor borders.
+ * @property {string} FLOATING - Floating action button (FAB) style: round and large.
+ * @property {string} ICON - Icon button style: single icon with backdrop and no background.
+ * @property {string} OUTLINED - Outlined style: no background with border.
+ * @property {string} RAISED - Raised style: no border with solid background.
+ */
+export var FButtonStyling;
+(function (FButtonStyling) {
+  FButtonStyling["FLAT"] = "flat";
+  FButtonStyling["FLOATING"] = "floating";
+  FButtonStyling["ICON"] = "icon";
+  FButtonStyling["OUTLINED"] = "outlined";
+  FButtonStyling["RAISED"] = "raised";
+})(FButtonStyling || (FButtonStyling = {}));

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

@@ -1,91 +1,91 @@
-import { h } from '@stencil/core';
-import { FButtonStyling } from './f-button-declarations';
-import { FImage } from '../f-image/f-image';
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-export const FButton = (props, children) => {
-  if (!props.styling) {
-    props.styling = FButtonStyling.RAISED;
-  }
-  if (!props.label && !props.icon) {
-    return;
-  }
-  const isIconButton = !!(props.styling.toLowerCase() === FButtonStyling.ICON ||
-    (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));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function renderButton(props) {
-  const isFlat = props.styling.toLowerCase() === FButtonStyling.FLAT;
-  const isFloating = props.styling.toLowerCase() === FButtonStyling.FLOATING;
-  const isIcon = props.styling.toLowerCase() === FButtonStyling.ICON;
-  const isOutlined = props.styling.toLowerCase() === FButtonStyling.OUTLINED;
-  const isRaised = !isFlat && !isFloating && !isOutlined && !isIcon ? true : false;
-  const propsFImage = {
-    color: props.disabled
-      ? `var(--kup_button_disabled_color)`
-      : isOutlined || isFlat
-        ? `var(--kup_button_primary_color)`
-        : `var(--kup_button_text_on_primary_color)`,
-    resource: props.icon,
-    sizeX: isFloating ? '1.75em' : '1.475em',
-    sizeY: isFloating ? '1.75em' : '1.475em',
-    wrapperClass: 'button__icon kup-icon',
-  };
-  if (props.showSpinner)
-    propsFImage.wrapperClass += ' content--hidden';
-  const classObj = {
-    button: true,
-    'button--disabled': props.disabled ? true : false,
-    'button--floating': isFloating ? true : false,
-    'button--outlined': isOutlined ? true : false,
-    'button--raised': isRaised ? true : false,
-    'button--no-label': !props.label || props.label === ' ' ? true : false,
-    'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
-  };
-  const classLabelObj = {
-    button__label: true,
-    'content--hidden': props.showSpinner && !props.disabled ? true : false,
-  };
-  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));
-}
-function renderIconButton(props) {
-  const propsFImage = {
-    color: props.disabled
-      ? `var(--kup_button_disabled_color)`
-      : `var(--kup_button_primary_color)`,
-    sizeX: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
-    sizeY: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
-  };
-  const classObj = {
-    'icon-button': true,
-    'button--disabled': props.disabled ? true : false,
-    'icon-button--on': props.toggable && props.checked ? true : false,
-    toggable: props.toggable ? true : false,
-    'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
-  };
-  const styleSpinnerContainer = {
-    '--kup_button_spinner_height': propsFImage.sizeY,
-    '--kup_button_spinner_width': propsFImage.sizeX,
-  };
-  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));
-}
+import { h } from '@stencil/core';
+import { FButtonStyling } from './f-button-declarations';
+import { FImage } from '../f-image/f-image';
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+export const FButton = (props, children) => {
+  if (!props.styling) {
+    props.styling = FButtonStyling.RAISED;
+  }
+  if (!props.label && !props.icon) {
+    return;
+  }
+  const isIconButton = !!(props.styling.toLowerCase() === FButtonStyling.ICON ||
+    (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));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function renderButton(props) {
+  const isFlat = props.styling.toLowerCase() === FButtonStyling.FLAT;
+  const isFloating = props.styling.toLowerCase() === FButtonStyling.FLOATING;
+  const isIcon = props.styling.toLowerCase() === FButtonStyling.ICON;
+  const isOutlined = props.styling.toLowerCase() === FButtonStyling.OUTLINED;
+  const isRaised = !isFlat && !isFloating && !isOutlined && !isIcon ? true : false;
+  const propsFImage = {
+    color: props.disabled
+      ? `var(--kup_button_disabled_color)`
+      : isOutlined || isFlat
+        ? `var(--kup_button_primary_color)`
+        : `var(--kup_button_text_on_primary_color)`,
+    resource: props.icon,
+    sizeX: isFloating ? '1.75em' : '1.475em',
+    sizeY: isFloating ? '1.75em' : '1.475em',
+    wrapperClass: 'button__icon kup-icon',
+  };
+  if (props.showSpinner)
+    propsFImage.wrapperClass += ' content--hidden';
+  const classObj = {
+    button: true,
+    'button--disabled': props.disabled ? true : false,
+    'button--floating': isFloating ? true : false,
+    'button--outlined': isOutlined ? true : false,
+    'button--raised': isRaised ? true : false,
+    'button--no-label': !props.label || props.label === ' ' ? true : false,
+    'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
+  };
+  const classLabelObj = {
+    button__label: true,
+    'content--hidden': props.showSpinner && !props.disabled ? true : false,
+  };
+  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));
+}
+function renderIconButton(props) {
+  const propsFImage = {
+    color: props.disabled
+      ? `var(--kup_button_disabled_color)`
+      : `var(--kup_button_primary_color)`,
+    sizeX: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
+    sizeY: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
+  };
+  const classObj = {
+    'icon-button': true,
+    'button--disabled': props.disabled ? true : false,
+    'icon-button--on': props.toggable && props.checked ? true : false,
+    toggable: props.toggable ? true : false,
+    'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
+  };
+  const styleSpinnerContainer = {
+    '--kup_button_spinner_height': propsFImage.sizeY,
+    '--kup_button_spinner_width': propsFImage.sizeX,
+  };
+  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));
+}

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

@@ -1,158 +1,158 @@
-import { KupTagNames, } from '../../types/GenericTypes';
-export const autoCenterComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
-export const fullWidthFieldsComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
-/**
- * Supported cell events.
- */
-export var FCellEvents;
-(function (FCellEvents) {
-  FCellEvents["CLICK"] = "kup-cell-click";
-  FCellEvents["ICON_CLICK"] = "kup-cell-iconclick";
-  FCellEvents["INPUT"] = "kup-cell-input";
-  FCellEvents["KEYUP"] = "kup-cell-keyup";
-  FCellEvents["UPDATE"] = "kup-cell-update";
-})(FCellEvents || (FCellEvents = {}));
-/**
- * Supported cell padding.
- */
-export var FCellPadding;
-(function (FCellPadding) {
-  FCellPadding["DENSE"] = "dense";
-  FCellPadding["MEDIUM"] = "medium";
-  FCellPadding["NONE"] = "";
-  FCellPadding["WIDE"] = "wide";
-})(FCellPadding || (FCellPadding = {}));
-/**
- * Supported cell CSS classes.
- */
-export 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.
- */
-export 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["MULTI_AUTOCOMPLETE"] = "AML";
-  FCellShapes["MULTI_COMBOBOX"] = "CML";
-  FCellShapes["PROGRESS_BAR"] = "PGB";
-  FCellShapes["RADIO"] = "RAD";
-  FCellShapes["RATING"] = "RTG";
-  FCellShapes["SWITCH"] = "SWT";
-  FCellShapes["TEXT_FIELD"] = "ITX";
-})(FCellShapes || (FCellShapes = {}));
-/**
- * Supported cell types.
- */
-export 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["MULTI_AUTOCOMPLETE"] = "multi-autocomplete";
-  FCellTypes["MULTI_COMBOBOX"] = "multi-combobox";
-  FCellTypes["NUMBER"] = "number";
-  FCellTypes["PROGRESS_BAR"] = "progress-bar";
-  FCellTypes["RADIO"] = "radio";
-  FCellTypes["RATING"] = "rating";
-  FCellTypes["STRING"] = "string";
-  FCellTypes["SWITCH"] = "switch";
-  FCellTypes["TIME"] = "time";
-})(FCellTypes || (FCellTypes = {}));
-export const editableTypes = [
-  FCellTypes.AUTOCOMPLETE,
-  FCellTypes.CHECKBOX,
-  FCellTypes.CHIP,
-  FCellTypes.COLOR_PICKER,
-  FCellTypes.COMBOBOX,
-  FCellTypes.DATE,
-  FCellTypes.LINK,
-  FCellTypes.MULTI_AUTOCOMPLETE,
-  FCellTypes.MULTI_COMBOBOX,
-  FCellTypes.NUMBER,
-  FCellTypes.RATING,
-  FCellTypes.STRING,
-  FCellTypes.SWITCH,
-  FCellTypes.TIME,
-];
-export 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,
-];
+import { KupTagNames, } from '../../types/GenericTypes';
+export const autoCenterComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+export const fullWidthFieldsComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
+/**
+ * Supported cell events.
+ */
+export var FCellEvents;
+(function (FCellEvents) {
+  FCellEvents["CLICK"] = "kup-cell-click";
+  FCellEvents["ICON_CLICK"] = "kup-cell-iconclick";
+  FCellEvents["INPUT"] = "kup-cell-input";
+  FCellEvents["KEYUP"] = "kup-cell-keyup";
+  FCellEvents["UPDATE"] = "kup-cell-update";
+})(FCellEvents || (FCellEvents = {}));
+/**
+ * Supported cell padding.
+ */
+export var FCellPadding;
+(function (FCellPadding) {
+  FCellPadding["DENSE"] = "dense";
+  FCellPadding["MEDIUM"] = "medium";
+  FCellPadding["NONE"] = "";
+  FCellPadding["WIDE"] = "wide";
+})(FCellPadding || (FCellPadding = {}));
+/**
+ * Supported cell CSS classes.
+ */
+export 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.
+ */
+export 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["MULTI_AUTOCOMPLETE"] = "AML";
+  FCellShapes["MULTI_COMBOBOX"] = "CML";
+  FCellShapes["PROGRESS_BAR"] = "PGB";
+  FCellShapes["RADIO"] = "RAD";
+  FCellShapes["RATING"] = "RTG";
+  FCellShapes["SWITCH"] = "SWT";
+  FCellShapes["TEXT_FIELD"] = "ITX";
+})(FCellShapes || (FCellShapes = {}));
+/**
+ * Supported cell types.
+ */
+export 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["MULTI_AUTOCOMPLETE"] = "multi-autocomplete";
+  FCellTypes["MULTI_COMBOBOX"] = "multi-combobox";
+  FCellTypes["NUMBER"] = "number";
+  FCellTypes["PROGRESS_BAR"] = "progress-bar";
+  FCellTypes["RADIO"] = "radio";
+  FCellTypes["RATING"] = "rating";
+  FCellTypes["STRING"] = "string";
+  FCellTypes["SWITCH"] = "switch";
+  FCellTypes["TIME"] = "time";
+})(FCellTypes || (FCellTypes = {}));
+export const editableTypes = [
+  FCellTypes.AUTOCOMPLETE,
+  FCellTypes.CHECKBOX,
+  FCellTypes.CHIP,
+  FCellTypes.COLOR_PICKER,
+  FCellTypes.COMBOBOX,
+  FCellTypes.DATE,
+  FCellTypes.LINK,
+  FCellTypes.MULTI_AUTOCOMPLETE,
+  FCellTypes.MULTI_COMBOBOX,
+  FCellTypes.NUMBER,
+  FCellTypes.RATING,
+  FCellTypes.STRING,
+  FCellTypes.SWITCH,
+  FCellTypes.TIME,
+];
+export 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,
+];