@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/components/kup-card/standard/kup-card-standard.js

@@ -14,20 +14,20 @@ const dom = document.documentElement;
  * @returns {VNode} 1st standard layout virtual node.
  */
 export function create1(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Cover image
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //Title, subtitle and description
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, imageArray[0] ? (h("div", { class: "section-1" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "section-2" }, textArray[textIndex] ? (h("div", { class: "sub-2 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-2 subtitle" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-2 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-3" }, compList(buttonArray, 'button'))) : null));
+    //Action buttons
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Cover image
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //Title, subtitle and description
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, imageArray[0] ? (h("div", { class: "section-1" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "section-2" }, textArray[textIndex] ? (h("div", { class: "sub-2 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-2 subtitle" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-2 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-3" }, compList(buttonArray, 'button'))) : null));
 }
 /**
  * 2nd standard card layout, inspired by Material Design.
@@ -35,20 +35,20 @@ export function create1(component) {
  * @returns {VNode} 2nd standard layout virtual node.
  */
 export function create2(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Cover image
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //Title, subtitle and description
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "section-1" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null), h("div", { class: "mdc-ripple-surface" }, imageArray[0] ? (h("div", { class: "section-2" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "section-3" }, textArray[++textIndex] ? (h("div", { class: "sub-3 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-4" }, compList(buttonArray, 'button'))) : null));
+    //Action buttons
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Cover image
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //Title, subtitle and description
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "section-1" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null), h("div", { class: "mdc-ripple-surface" }, imageArray[0] ? (h("div", { class: "section-2" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "section-3" }, textArray[++textIndex] ? (h("div", { class: "sub-3 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-4" }, compList(buttonArray, 'button'))) : null));
 }
 /**
  * 3rd standard card layout, inspired by Material Design.
@@ -56,20 +56,20 @@ export function create2(component) {
  * @returns {VNode} 3rd standard layout virtual node.
  */
 export function create3(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Cover image
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //Title, subtitle and description
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, h("div", { class: "section-1" }, h("div", { class: "media" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" }))) : null, h("div", { class: "text-on-media" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null))), h("div", { class: "section-2" }, textArray[++textIndex] ? (h("div", { class: "sub-2 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-3" }, compList(buttonArray, 'button'))) : null));
+    //Action buttons
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Cover image
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //Title, subtitle and description
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, h("div", { class: "section-1" }, h("div", { class: "media" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" }))) : null, h("div", { class: "text-on-media" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null))), h("div", { class: "section-2" }, textArray[++textIndex] ? (h("div", { class: "sub-2 description" }, h("div", null, textArray[textIndex]))) : null)), buttonArray.length > 0 ? (h("div", { class: "section-3" }, compList(buttonArray, 'button'))) : null));
 }
 /**
  * 4th standard card layout, inspired by Material Design.
@@ -77,20 +77,20 @@ export function create3(component) {
  * @returns {VNode} 4th standard layout virtual node.
  */
 export function create4(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Left image
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //Title, subtitle
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, h("div", { class: "section-1" }, imageArray[0] ? (h("div", { class: "sub-1 image" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "text" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null))), h("div", { class: "section-2" }, buttonArray ? compList(buttonArray, 'button') : '')));
+    //Action buttons
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Left image
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //Title, subtitle
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", { class: "mdc-ripple-surface" }, h("div", { class: "section-1" }, imageArray[0] ? (h("div", { class: "sub-1 image" }, h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" })))) : null, h("div", { class: "text" }, textArray[textIndex] ? (h("div", { class: "sub-1 title" }, h("div", null, textArray[textIndex]))) : null, textArray[++textIndex] ? (h("div", { class: "sub-1 subtitle" }, h("div", null, textArray[textIndex]))) : null))), h("div", { class: "section-2" }, buttonArray ? compList(buttonArray, 'button') : '')));
 }
 /**
  * 5th standard card layout, useful to display TODOs with extensive information.
@@ -98,39 +98,39 @@ export function create4(component) {
  * @returns {VNode} 5th standard layout virtual node.
  */
 export function create5(component) {
-  //Action button
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Top and bottom bars colors
-  let colorIndex = 0;
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Left icon and right image
-  let imageIndex = 0;
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //Progress bar
-  const progressbarArray = component.data['progressbar']
-    ? component.data['progressbar']
-    : [];
-  //6 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[colorIndex]
-      ? colorArray[colorIndex]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-    [`--color-1`]: colorArray[++colorIndex]
-      ? colorArray[colorIndex]
-      : `rgba(var(${KupThemeColorValues.PRIMARY}-rgb),0.1)`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-2 icon" }, imageArray[imageIndex] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[imageIndex], { sizeX: "100%", sizeY: "100%" }))) : null), h("div", { class: "sub-2 text" }, h("div", { class: "desc-text" }, textArray[textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2 image" }, imageArray[++imageIndex] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[imageIndex], { sizeX: "100%", sizeY: "100%" }))) : null)), h("div", { class: "section-3" }, h("div", { class: "sub-3 progress-bar" }, progressbarArray[0] ? (h("kup-progress-bar", Object.assign({ id: "progressBar1", "is-slim": true }, progressbarArray[0]))) : null), h("div", { class: "sub-3 button" }, buttonArray[0] ? (h("kup-button", Object.assign({ id: "button1" }, buttonArray[0]))) : null)), h("div", { class: "section-4" }, h("div", { class: "sub-4 text" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-4 text" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')))));
+    //Action button
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Top and bottom bars colors
+    let colorIndex = 0;
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Left icon and right image
+    let imageIndex = 0;
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //Progress bar
+    const progressbarArray = component.data['progressbar']
+        ? component.data['progressbar']
+        : [];
+    //6 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[colorIndex]
+            ? colorArray[colorIndex]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+        [`--color-1`]: colorArray[++colorIndex]
+            ? colorArray[colorIndex]
+            : `rgba(var(${KupThemeColorValues.PRIMARY}-rgb),0.1)`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-2 icon" }, imageArray[imageIndex] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[imageIndex], { sizeX: "100%", sizeY: "100%" }))) : null), h("div", { class: "sub-2 text" }, h("div", { class: "desc-text" }, textArray[textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2 image" }, imageArray[++imageIndex] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[imageIndex], { sizeX: "100%", sizeY: "100%" }))) : null)), h("div", { class: "section-3" }, h("div", { class: "sub-3 progress-bar" }, progressbarArray[0] ? (h("kup-progress-bar", Object.assign({ id: "progressBar1", "is-slim": true }, progressbarArray[0]))) : null), h("div", { class: "sub-3 button" }, buttonArray[0] ? (h("kup-button", Object.assign({ id: "button1" }, buttonArray[0]))) : null)), h("div", { class: "section-4" }, h("div", { class: "sub-4 text" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-4 text" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "alt-text" }, textArray[++textIndex] ? textArray[textIndex] : '')))));
 }
 /**
  * 6th standard card layout, useful to display TODOs in a compact view.
@@ -138,31 +138,31 @@ export function create5(component) {
  * @returns {VNode} 6th standard layout virtual node.
  */
 export function create6(component) {
-  //Action button
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Left bar color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Radial progress bar
-  const progressbarArray = component.data['progressbar']
-    ? component.data['progressbar']
-    : [];
-  //Left and center text
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--color-0']: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-    ['--kup_card_dynamic_color_0']: 'white',
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, h("div", { class: "alt-text" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "section-2" }, h("div", { class: "sub-2" }, progressbarArray[0] ? (h("kup-progress-bar", Object.assign({ id: "progressBar1", "is-radial": true }, progressbarArray[0]))) : null, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')), buttonArray[0] ? (h("kup-button", Object.assign({ id: "button1" }, buttonArray[0]))) : null)));
+    //Action button
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Left bar color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Radial progress bar
+    const progressbarArray = component.data['progressbar']
+        ? component.data['progressbar']
+        : [];
+    //Left and center text
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        ['--color-0']: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+        ['--kup_card_dynamic_color_0']: 'white',
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, h("div", { class: "alt-text" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "section-2" }, h("div", { class: "sub-2" }, progressbarArray[0] ? (h("kup-progress-bar", Object.assign({ id: "progressBar1", "is-radial": true }, progressbarArray[0]))) : null, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')), buttonArray[0] ? (h("kup-button", Object.assign({ id: "button1" }, buttonArray[0]))) : null)));
 }
 /**
  * 7th standard card layout, centered image and text.
@@ -170,26 +170,26 @@ export function create6(component) {
  * @returns {VNode} 7th standard layout virtual node.
  */
 export function create7(component) {
-  //Top bar color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Center image
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-2 image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" }))) : null), h("div", { class: "sub-2 text" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : ''))), h("div", { class: "section-3" }, h("div", { class: "sub-3 alt-text" }, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "sub-3 alt-text" }, textArray[++textIndex] ? textArray[textIndex] : ''))));
+    //Top bar color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Center image
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //3 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-2 image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "100%", sizeY: "100%" }))) : null), h("div", { class: "sub-2 text" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : ''))), h("div", { class: "section-3" }, h("div", { class: "sub-3 alt-text" }, textArray[++textIndex] ? textArray[textIndex] : ''), h("div", { class: "sub-3 alt-text" }, textArray[++textIndex] ? textArray[textIndex] : ''))));
 }
 /**
  * 8th standard card layout, useful to display a list of chips.
@@ -197,30 +197,30 @@ export function create7(component) {
  * @returns {VNode} 8th standard layout virtual node.
  */
 export function create8(component) {
-  //Chips
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  //Background and corner text colors
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Right corner icon
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "background" }), h("div", { class: "section-1" }, h("div", { class: "sub-1" }, h("div", { class: "text" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-3" }, h("div", { class: "image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "24px", sizeY: "24px" }))) : null), h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "section-2" }, chipArray[0] ? (h("kup-chip", Object.assign({ id: "chip1" }, chipArray[0]))) : null)));
+    //Chips
+    const chipArray = component.data['chip']
+        ? component.data['chip']
+        : [];
+    //Background and corner text colors
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Right corner icon
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //3 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "background" }), h("div", { class: "section-1" }, h("div", { class: "sub-1" }, h("div", { class: "text" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-3" }, h("div", { class: "image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "24px", sizeY: "24px" }))) : null), h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "section-2" }, chipArray[0] ? (h("kup-chip", Object.assign({ id: "chip1" }, chipArray[0]))) : null)));
 }
 /**
  * 9th standard card layout, chart displayed on the right with some info on the left.
@@ -228,36 +228,36 @@ export function create8(component) {
  * @returns {VNode} 9th standard layout virtual node.
  */
 export function create9(component) {
-  //Chart
-  const chartArray = component.data['chart']
-    ? component.data['chart']
-    : [];
-  //Icon color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Left icon
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, h("div", { class: "sub-1" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : ''))))), h("div", { class: "section-2" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null)));
+    //Chart
+    const chartArray = component.data['chart']
+        ? component.data['chart']
+        : [];
+    //Icon color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Left icon
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //3 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, h("div", { class: "sub-1" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : ''))))), h("div", { class: "section-2" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null)));
 }
 /**
  * 10th standard card layout, chart displayed on the left with some info on the right.
@@ -265,36 +265,36 @@ export function create9(component) {
  * @returns {VNode} 10th standard layout virtual node.
  */
 export function create10(component) {
-  //Chart
-  const chartArray = component.data['chart']
-    ? component.data['chart']
-    : [];
-  //Icon color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Left icon
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null), h("div", { class: "section-2" }, h("div", { class: "sub-1" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : '')))))));
+    //Chart
+    const chartArray = component.data['chart']
+        ? component.data['chart']
+        : [];
+    //Icon color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Left icon
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //3 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null), h("div", { class: "section-2" }, h("div", { class: "sub-1" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : '')))))));
 }
 /**
  * 11th standard card layout, chart displayed on the right with some info on the left, visible when hovering on the colored bar.
@@ -302,44 +302,44 @@ export function create10(component) {
  * @returns {VNode} 11th standard layout virtual node.
  */
 export function create11(component) {
-  //Chart
-  const chartArray = component.data['chart']
-    ? component.data['chart']
-    : [];
-  //Icon and bar color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Left icon
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1", onMouseEnter: (e) => {
-      let el = e.currentTarget;
-      el.style.minWidth = el.scrollWidth + 10 + 'px';
-      el.style.maxWidth = el.scrollWidth + 10 + 'px';
-    }, onMouseLeave: (e) => {
-      let el = e.currentTarget;
-      el.style.minWidth = '';
-      el.style.maxWidth = '';
-    } }, h("div", { class: "sub-1 dyn-color" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
-    ? textArray[textIndex]
-    : ''))))), h("div", { class: "section-2" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null)));
+    //Chart
+    const chartArray = component.data['chart']
+        ? component.data['chart']
+        : [];
+    //Icon and bar color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //Left icon
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    //3 text slots
+    let textIndex = 0;
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Dynamic CSS variables
+    let CSSVariables = {
+        [`--color-0`]: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`,
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1", onMouseEnter: (e) => {
+            let el = e.currentTarget;
+            el.style.minWidth = el.scrollWidth + 10 + 'px';
+            el.style.maxWidth = el.scrollWidth + 10 + 'px';
+        }, onMouseLeave: (e) => {
+            let el = e.currentTarget;
+            el.style.minWidth = '';
+            el.style.maxWidth = '';
+        } }, h("div", { class: "sub-1 dyn-color" }, h("div", { class: "text description" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+            ? colorArray[0]
+            : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "3em", sizeY: "3em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "text title" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : '')), h("div", { class: "text subtitle" }, h("div", null, textArray[++textIndex]
+        ? textArray[textIndex]
+        : ''))))), h("div", { class: "section-2" }, chartArray[0] ? (h("kup-chart", Object.assign({ id: "chart1" }, chartArray[0]))) : null)));
 }
 /**
  * 12th standard card layout, used for column menus in tree and data table.
@@ -347,42 +347,42 @@ export function create11(component) {
  * @returns {VNode} 12th standard layout virtual node.
  */
 export function create12(component) {
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  const checkboxArray = component.data['checkbox']
-    ? component.data['checkbox']
-    : [];
-  const datepickerArray = component.data['datepicker']
-    ? component.data['datepicker']
-    : [];
-  const textfieldArray = component.data['textfield']
-    ? component.data['textfield']
-    : [];
-  const timepickerArray = component.data['timepicker']
-    ? component.data['timepicker']
-    : [];
-  // Setting up buttons.
-  const buttonsIds = [];
-  for (let index = 0; index < buttonArray.length; index++) {
-    const button = buttonArray[index];
-    if (button['id']) {
-      buttonsIds.push(button['id']);
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    const checkboxArray = component.data['checkbox']
+        ? component.data['checkbox']
+        : [];
+    const datepickerArray = component.data['datepicker']
+        ? component.data['datepicker']
+        : [];
+    const textfieldArray = component.data['textfield']
+        ? component.data['textfield']
+        : [];
+    const timepickerArray = component.data['timepicker']
+        ? component.data['timepicker']
+        : [];
+    // Setting up buttons.
+    const buttonsIds = [];
+    for (let index = 0; index < buttonArray.length; index++) {
+        const button = buttonArray[index];
+        if (button['id']) {
+            buttonsIds.push(button['id']);
+        }
     }
-  }
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("div", { class: "section-1" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_GROUP)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_ADD_COLUMNS)))) : null)) : null, h("div", { class: `section-2 ${textfieldArray.length > 0 ||
-      datepickerArray.length > 0 ||
-      timepickerArray.length > 0
-      ? KupCardCSSClasses.HAS_CONTENT
-      : ''}` }, datepickerArray.length > 0
-    ? compList(datepickerArray, 'datepicker')
-    : null, textfieldArray.length > 0
-    ? compList(textfieldArray, 'textfield')
-    : null, timepickerArray.length > 0
-    ? compList(timepickerArray, 'timepicker')
-    : null), checkboxArray.length > 0 ? (h("div", { class: "section-3" }, compList(checkboxArray, 'checkbox'))) : null));
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("div", { class: "section-1" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_GROUP)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_ADD_COLUMNS) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id === KupColumnMenuIds.BUTTON_ADD_COLUMNS)))) : null)) : null, h("div", { class: `section-2 ${textfieldArray.length > 0 ||
+            datepickerArray.length > 0 ||
+            timepickerArray.length > 0
+            ? KupCardCSSClasses.HAS_CONTENT
+            : ''}` }, datepickerArray.length > 0
+        ? compList(datepickerArray, 'datepicker')
+        : null, textfieldArray.length > 0
+        ? compList(textfieldArray, 'textfield')
+        : null, timepickerArray.length > 0
+        ? compList(timepickerArray, 'timepicker')
+        : null), checkboxArray.length > 0 ? (h("div", { class: "section-3" }, compList(checkboxArray, 'checkbox'))) : null));
 }
 /**
  * 13th standard card layout, buttons and text lines, used for debug window.
@@ -390,23 +390,23 @@ export function create12(component) {
  * @returns {VNode} 13th standard layout virtual node.
  */
 export function create13(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Combobox list
-  const comboboxArray = component.data['combobox']
-    ? component.data['combobox']
-    : [];
-  //String list
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Textfield list
-  const textfieldArray = component.data['textfield']
-    ? component.data['textfield']
-    : [];
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", null, buttonArray.length > 0 || textfieldArray.length > 0 ? (h("div", { class: "section-1" }, compList(buttonArray, 'button'), compList(textfieldArray, 'textfield'), compList(comboboxArray, 'combobox'))) : null, textArray.length > 0 ? (h("div", { class: "section-2" }, compList(textArray, 'text'))) : null)));
+    //Action buttons
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    //Combobox list
+    const comboboxArray = component.data['combobox']
+        ? component.data['combobox']
+        : [];
+    //String list
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    //Textfield list
+    const textfieldArray = component.data['textfield']
+        ? component.data['textfield']
+        : [];
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ${buttonArray.length > 0 ? KupCardCSSClasses.HAS_ACTIONS : ''}` }, h("div", null, buttonArray.length > 0 || textfieldArray.length > 0 ? (h("div", { class: "section-1" }, compList(buttonArray, 'button'), compList(textfieldArray, 'textfield'), compList(comboboxArray, 'combobox'))) : null, textArray.length > 0 ? (h("div", { class: "section-2" }, compList(textArray, 'text'))) : null)));
 }
 /**
  * 14th standard card layout, used for column menus in tree and data table (with tabs). This is a very specifically-designed layout, so correct ids are a must.
@@ -414,111 +414,111 @@ export function create13(component) {
  * @returns {VNode} 14th standard layout virtual node.
  */
 export function create14(component) {
-  const autocompleteArray = component.data['autocomplete']
-    ? component.data['autocomplete']
-    : [];
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  const checkboxArray = component.data['checkbox']
-    ? component.data['checkbox']
-    : [];
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  const datepickerArray = component.data['datepicker']
-    ? component.data['datepicker']
-    : [];
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  const objectArray = component.data['object']
-    ? component.data['object']
-    : [];
-  const switchArray = component.data['switch']
-    ? component.data['switch']
-    : [];
-  const tabbarArray = component.data['tabbar']
-    ? component.data['tabbar']
-    : [];
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  const textfieldArray = component.data['textfield']
-    ? component.data['textfield']
-    : [];
-  const timepickerArray = component.data['timepicker']
-    ? component.data['timepicker']
-    : [];
-  const treeArray = component.data['tree']
-    ? component.data['tree']
-    : [];
-  // Setting up currently visible view.
-  const tabsValues = [];
-  let viewIndex = 1;
-  let visibleView = 1;
-  if (tabbarArray[0] && tabbarArray[0].data) {
-    for (let index = 0; index < tabbarArray[0].data.length; index++) {
-      const tab = tabbarArray[0].data[index];
-      tabsValues.push(tab.id);
-      if (tab.active) {
-        visibleView = index + 1;
-      }
+    const autocompleteArray = component.data['autocomplete']
+        ? component.data['autocomplete']
+        : [];
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    const checkboxArray = component.data['checkbox']
+        ? component.data['checkbox']
+        : [];
+    const chipArray = component.data['chip']
+        ? component.data['chip']
+        : [];
+    const datepickerArray = component.data['datepicker']
+        ? component.data['datepicker']
+        : [];
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    const objectArray = component.data['object']
+        ? component.data['object']
+        : [];
+    const switchArray = component.data['switch']
+        ? component.data['switch']
+        : [];
+    const tabbarArray = component.data['tabbar']
+        ? component.data['tabbar']
+        : [];
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    const textfieldArray = component.data['textfield']
+        ? component.data['textfield']
+        : [];
+    const timepickerArray = component.data['timepicker']
+        ? component.data['timepicker']
+        : [];
+    const treeArray = component.data['tree']
+        ? component.data['tree']
+        : [];
+    // Setting up currently visible view.
+    const tabsValues = [];
+    let viewIndex = 1;
+    let visibleView = 1;
+    if (tabbarArray[0] && tabbarArray[0].data) {
+        for (let index = 0; index < tabbarArray[0].data.length; index++) {
+            const tab = tabbarArray[0].data[index];
+            tabsValues.push(tab.id);
+            if (tab.active) {
+                visibleView = index + 1;
+            }
+        }
     }
-  }
-  // Setting up buttons.
-  const buttonsIds = [];
-  for (let index = 0; index < buttonArray.length; index++) {
-    const button = buttonArray[index];
-    if (button['id']) {
-      buttonsIds.push(button['id']);
+    // Setting up buttons.
+    const buttonsIds = [];
+    for (let index = 0; index < buttonArray.length; index++) {
+        const button = buttonArray[index];
+        if (button['id']) {
+            buttonsIds.push(button['id']);
+        }
     }
-  }
-  // Setting up switches.
-  const switchesIds = [];
-  for (let index = 0; index < switchArray.length; index++) {
-    const switchEl = switchArray[index];
-    if (switchEl['id']) {
-      switchesIds.push(switchEl['id']);
+    // Setting up switches.
+    const switchesIds = [];
+    for (let index = 0; index < switchArray.length; index++) {
+        const switchEl = switchArray[index];
+        if (switchEl['id']) {
+            switchesIds.push(switchEl['id']);
+        }
     }
-  }
-  // Setting up text fields.
-  const textfieldsIds = [];
-  for (let index = 0; index < textfieldArray.length; index++) {
-    const textfield = textfieldArray[index];
-    if (textfield['id']) {
-      textfieldsIds.push(textfield['id']);
+    // Setting up text fields.
+    const textfieldsIds = [];
+    for (let index = 0; index < textfieldArray.length; index++) {
+        const textfield = textfieldArray[index];
+        if (textfield['id']) {
+            textfieldsIds.push(textfield['id']);
+        }
     }
-  }
-  return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, objectArray[0] ? (h("div", { class: "section-1" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))), h("div", { class: "sub-1" }, textArray[0] ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "top" }, textArray[0] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "buttons" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_OPEN_IN_NEW)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_SEARCH)))) : null)) : null)) : null, textArray[1] && textArray[2] ? (h("div", { class: "info" }, h("span", { class: "label" }, textArray[1]), h("span", { class: "value" }, textArray[2]))) : null, textArray[3] && textArray[4] ? (h("div", { class: "info" }, h("span", { class: "label" }, textArray[3]), h("span", { class: "value" }, textArray[4]))) : null))) : null, h("div", { class: "section-2" }, tabbarArray[0] ? (h("kup-tab-bar", Object.assign({}, tabbarArray[0], { id: KupCardIds.VIEW_SELECTOR }))) : null), h("div", { class: "section-3" }, tabsValues.includes(KupLanguageGeneric.FILTERS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
-      ? KupCardCSSClasses.VISIBLE
-      : ''}` }, h("div", { class: `sub-field ${textfieldArray.length > 0 ||
-      datepickerArray.length > 0 ||
-      timepickerArray.length > 0
-      ? KupCardCSSClasses.HAS_CONTENT
-      : ''}` }, datepickerArray.length > 0
-    ? compList(datepickerArray, 'datepicker')
-    : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FILTER) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
-    KupColumnMenuIds.TEXTFIELD_FILTER)))) : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FROM) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
-    KupColumnMenuIds.TEXTFIELD_FROM)))) : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_TO) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
-    KupColumnMenuIds.TEXTFIELD_TO)))) : null, timepickerArray.length > 0
-    ? compList(timepickerArray, 'timepicker')
-    : null), checkboxArray.length > 0 ? (h("div", { class: "sub-checkbox" }, compList(checkboxArray, 'checkbox'))) : null)) : null, tabsValues.includes(KupLanguageColumn.COLUMNS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
-      ? KupCardCSSClasses.VISIBLE
-      : ''}` }, h("div", { class: "sub-button" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_GROUP)))) : null), h("div", { class: "sub-formula" }, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FORMULA) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
-    KupColumnMenuIds.TEXTFIELD_FORMULA)))) : null), h("div", { class: "sub-chip" }, chipArray[0] ? (h("kup-chip", Object.assign({}, chipArray[0], { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST }))) : (h("kup-chip", { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST })), buttonsIds.includes(KupColumnMenuIds.BUTTON_APPLY) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_APPLY)))) : null), objectArray[0] ? (h("div", { class: "sub-tree" }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width", globalFilter: true }, treeArray[0], { id: KupCardIds.EXTRA_COLUMNS }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "8px", layout: 2 }))))) : null)) : null, tabsValues.includes(KupLanguageGeneric.SETTINGS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
-      ? KupCardCSSClasses.VISIBLE
-      : ''}` }, h("div", { class: "sub-autocomplete" }, autocompleteArray.length > 0
-    ? compList(autocompleteArray, 'autocomplete')
-    : null), h("div", { class: "sub-switch" }, switchesIds.includes(KupColumnMenuIds.SWITCH_KEY) ? (h("kup-switch", Object.assign({}, switchArray.find((x) => x.id === KupColumnMenuIds.SWITCH_KEY)))) : null))) : null)));
+    return (h("div", { class: `standard-layout-${component.layoutNumber} ` }, objectArray[0] ? (h("div", { class: "section-1" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))), h("div", { class: "sub-1" }, textArray[0] ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "top" }, textArray[0] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "buttons" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_OPEN_IN_NEW)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_SEARCH)))) : null)) : null)) : null, textArray[1] && textArray[2] ? (h("div", { class: "info" }, h("span", { class: "label" }, textArray[1]), h("span", { class: "value" }, textArray[2]))) : null, textArray[3] && textArray[4] ? (h("div", { class: "info" }, h("span", { class: "label" }, textArray[3]), h("span", { class: "value" }, textArray[4]))) : null))) : null, h("div", { class: "section-2" }, tabbarArray[0] ? (h("kup-tab-bar", Object.assign({}, tabbarArray[0], { id: KupCardIds.VIEW_SELECTOR }))) : null), h("div", { class: "section-3" }, tabsValues.includes(KupLanguageGeneric.FILTERS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
+            ? KupCardCSSClasses.VISIBLE
+            : ''}` }, h("div", { class: `sub-field ${textfieldArray.length > 0 ||
+            datepickerArray.length > 0 ||
+            timepickerArray.length > 0
+            ? KupCardCSSClasses.HAS_CONTENT
+            : ''}` }, datepickerArray.length > 0
+        ? compList(datepickerArray, 'datepicker')
+        : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FILTER) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+        KupColumnMenuIds.TEXTFIELD_FILTER)))) : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FROM) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+        KupColumnMenuIds.TEXTFIELD_FROM)))) : null, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_TO) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+        KupColumnMenuIds.TEXTFIELD_TO)))) : null, timepickerArray.length > 0
+        ? compList(timepickerArray, 'timepicker')
+        : null), checkboxArray.length > 0 ? (h("div", { class: "sub-checkbox" }, compList(checkboxArray, 'checkbox'))) : null)) : null, tabsValues.includes(KupLanguageColumn.COLUMNS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
+            ? KupCardCSSClasses.VISIBLE
+            : ''}` }, h("div", { class: "sub-button" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_REMOVE) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_REMOVE)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_GROUP)))) : null), h("div", { class: "sub-formula" }, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FORMULA) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+        KupColumnMenuIds.TEXTFIELD_FORMULA)))) : null), h("div", { class: "sub-chip" }, chipArray[0] ? (h("kup-chip", Object.assign({}, chipArray[0], { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST }))) : (h("kup-chip", { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST })), buttonsIds.includes(KupColumnMenuIds.BUTTON_APPLY) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_APPLY)))) : null), objectArray[0] ? (h("div", { class: "sub-tree" }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width", globalFilter: true }, treeArray[0], { id: KupCardIds.EXTRA_COLUMNS }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "8px", layout: 2 }))))) : null)) : null, tabsValues.includes(KupLanguageGeneric.SETTINGS) ? (h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${visibleView === viewIndex++
+            ? KupCardCSSClasses.VISIBLE
+            : ''}` }, h("div", { class: "sub-autocomplete" }, autocompleteArray.length > 0
+        ? compList(autocompleteArray, 'autocomplete')
+        : null), h("div", { class: "sub-switch" }, switchesIds.includes(KupColumnMenuIds.SWITCH_KEY) ? (h("kup-switch", Object.assign({}, switchArray.find((x) => x.id === KupColumnMenuIds.SWITCH_KEY)))) : null))) : null)));
 }
 /**
  * 15th standard card layout, it can be used as a tooltip.
@@ -526,73 +526,73 @@ export function create14(component) {
  * @returns {VNode} 15th standard layout virtual node.
  */
 export function create15(component) {
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  const treeArray = component.data['tree']
-    ? component.data['tree']
-    : [];
-  // Setting up currently visible view.
-  const viewIndex = 1;
-  const sectionOneArray = textArray.slice(0, 5);
-  // Setting up section 2
-  const sectionTwoArray = textArray.slice(5);
-  const sectionTwoDetails = [];
-  const labels = [];
-  const values = [];
-  for (let index = 0; index < sectionTwoArray.length; index++) {
-    if (index % 2 === 0) {
-      labels.push(sectionTwoArray[index]);
-    }
-    else {
-      values.push(sectionTwoArray[index]);
+    const buttonArray = component.data['button']
+        ? component.data['button']
+        : [];
+    const imageArray = component.data['image']
+        ? component.data['image']
+        : [];
+    const textArray = component.data['text']
+        ? component.data['text']
+        : [];
+    const treeArray = component.data['tree']
+        ? component.data['tree']
+        : [];
+    // Setting up currently visible view.
+    const viewIndex = 1;
+    const sectionOneArray = textArray.slice(0, 5);
+    // Setting up section 2
+    const sectionTwoArray = textArray.slice(5);
+    const sectionTwoDetails = [];
+    const labels = [];
+    const values = [];
+    for (let index = 0; index < sectionTwoArray.length; index++) {
+        if (index % 2 === 0) {
+            labels.push(sectionTwoArray[index]);
+        }
+        else {
+            values.push(sectionTwoArray[index]);
+        }
     }
-  }
-  for (let index = 0; index < labels.length; index++) {
-    sectionTwoDetails.push(h("div", { class: "detail-row" }, h("div", { class: "detail-row__label ellipsis" }, labels[index]), h("div", { class: "detail-row__value ellipsis" }, values[index])));
-  }
-  // Setting up buttons.
-  const buttonsIds = [];
-  const genericButtons = [];
-  const isReservedID = (id) => {
-    return (id === KupColumnMenuIds.BUTTON_OPEN_IN_NEW ||
-      id === KupColumnMenuIds.BUTTON_SEARCH);
-  };
-  for (let index = 0; index < buttonArray.length; index++) {
-    const button = buttonArray[index];
-    if (button['id']) {
-      buttonsIds.push(button['id']);
+    for (let index = 0; index < labels.length; index++) {
+        sectionTwoDetails.push(h("div", { class: "detail-row" }, h("div", { class: "detail-row__label ellipsis" }, labels[index]), h("div", { class: "detail-row__value ellipsis" }, values[index])));
     }
-    if (!isReservedID(button['id'])) {
-      genericButtons.push(button);
-    }
-  }
-  const createDropdown = () => {
-    const props = {
-      data: { 'kup-list': { data: [], showIcons: true } },
-      dropdownOnly: true,
-      icon: 'more_vert',
-      id: 'options',
-      styling: FButtonStyling.ICON,
+    // Setting up buttons.
+    const buttonsIds = [];
+    const genericButtons = [];
+    const isReservedID = (id) => {
+        return (id === KupColumnMenuIds.BUTTON_OPEN_IN_NEW ||
+            id === KupColumnMenuIds.BUTTON_SEARCH);
     };
-    for (let index = 5; index < genericButtons.length; index++) {
-      const button = genericButtons[index];
-      props.data['kup-list'].data.push(Object.assign(Object.assign({}, button), { value: button.title }));
+    for (let index = 0; index < buttonArray.length; index++) {
+        const button = buttonArray[index];
+        if (button['id']) {
+            buttonsIds.push(button['id']);
+        }
+        if (!isReservedID(button['id'])) {
+            genericButtons.push(button);
+        }
     }
-    return (h("kup-dropdown-button", Object.assign({}, props, { title: dom.ketchup.language.translate(KupLanguageGeneric.OPTIONS) })));
-  };
-  return (h("div", { class: `standard-layout-${component.layoutNumber}` }, h("div", { class: "section-1" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))), h("div", { class: "sub-1" }, textArray[0] ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "top" }, textArray[0] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
-    buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "buttons" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_OPEN_IN_NEW)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-    KupColumnMenuIds.BUTTON_SEARCH)))) : null)) : null)) : null, sectionOneArray[1] && sectionOneArray[2] ? (h("div", { class: "info" }, h("span", { class: "label" }, sectionOneArray[1]), h("span", { class: "value" }, sectionOneArray[2]))) : null, sectionOneArray[3] && sectionOneArray[4] ? (h("div", { class: "info" }, h("span", { class: "label" }, sectionOneArray[3]), h("span", { class: "value" }, sectionOneArray[4]))) : null)), h("div", { class: "section-2" }, h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${KupCardCSSClasses.VISIBLE}` }, h("div", { class: "info" }, sectionTwoDetails.length > 0
-    ? sectionTwoDetails
-    : null)), h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0]))) : null)), genericButtons.length > 0 ? (h("div", { class: "section-3" }, compList(genericButtons.slice(0, 5), 'button'), genericButtons.length > 5 ? createDropdown() : null, treeArray[0] ? (h("kup-button", { title: dom.ketchup.language.translate(KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" })) : null)) : null));
+    const createDropdown = () => {
+        const props = {
+            data: { 'kup-list': { data: [], showIcons: true } },
+            dropdownOnly: true,
+            icon: 'more_vert',
+            id: 'options',
+            styling: FButtonStyling.ICON,
+        };
+        for (let index = 5; index < genericButtons.length; index++) {
+            const button = genericButtons[index];
+            props.data['kup-list'].data.push(Object.assign(Object.assign({}, button), { value: button.title }));
+        }
+        return (h("kup-dropdown-button", Object.assign({}, props, { title: dom.ketchup.language.translate(KupLanguageGeneric.OPTIONS) })));
+    };
+    return (h("div", { class: `standard-layout-${component.layoutNumber}` }, h("div", { class: "section-1" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" }, h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))), h("div", { class: "sub-1" }, textArray[0] ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "top" }, textArray[0] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ||
+        buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("div", { class: "buttons" }, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_OPEN_IN_NEW)))) : null, buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+        KupColumnMenuIds.BUTTON_SEARCH)))) : null)) : null)) : null, sectionOneArray[1] && sectionOneArray[2] ? (h("div", { class: "info" }, h("span", { class: "label" }, sectionOneArray[1]), h("span", { class: "value" }, sectionOneArray[2]))) : null, sectionOneArray[3] && sectionOneArray[4] ? (h("div", { class: "info" }, h("span", { class: "label" }, sectionOneArray[3]), h("span", { class: "value" }, sectionOneArray[4]))) : null)), h("div", { class: "section-2" }, h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${KupCardCSSClasses.VISIBLE}` }, h("div", { class: "info" }, sectionTwoDetails.length > 0
+        ? sectionTwoDetails
+        : null)), h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` }, treeArray[0] ? (h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0]))) : null)), genericButtons.length > 0 ? (h("div", { class: "section-3" }, compList(genericButtons.slice(0, 5), 'button'), genericButtons.length > 5 ? createDropdown() : null, treeArray[0] ? (h("kup-button", { title: dom.ketchup.language.translate(KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" })) : null)) : null));
 }