@sme.up/ketchup 6.6.0 → 6.7.0

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

@@ -6,6 +6,7 @@ import { FChipType } from '../../../f-components/f-chip/f-chip-declarations';
 import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
 import { KupColumnMenuIds } from '../../../utils/kup-column-menu/kup-column-menu-declarations';
 import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
+import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
 const dom = document.documentElement;
 /**
  * 1st standard card layout, inspired by Material Design.
@@ -26,18 +27,7 @@ export function create1(component) {
   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));
+  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.
@@ -58,18 +48,7 @@ export function create2(component) {
   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));
+  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.
@@ -90,19 +69,7 @@ export function create3(component) {
   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));
+  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.
@@ -123,17 +90,7 @@ export function create4(component) {
   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') : '')));
+  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.
@@ -173,24 +130,7 @@ export function create5(component) {
       ? 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] : '')))));
+  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.
@@ -222,14 +162,7 @@ export function create6(component) {
       : `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)));
+  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.
@@ -256,15 +189,7 @@ export function create7(component) {
       ? 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] : ''))));
+  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.
@@ -295,17 +220,7 @@ export function create8(component) {
       ? 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)));
+  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.
@@ -336,24 +251,13 @@ export function create9(component) {
       ? 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)));
+  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.
@@ -384,24 +288,13 @@ export function create10(component) {
       ? 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]
-              : '')))))));
+  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.
@@ -432,32 +325,21 @@ export function create11(component) {
       ? 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)));
+  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.
@@ -488,28 +370,19 @@ export function create12(component) {
       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,
+  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
-        ? compList(timepickerArray, 'timepicker')
-        : null),
-    checkboxArray.length > 0 ? (h("div", { class: "section-3" }, compList(checkboxArray, 'checkbox'))) : null));
+      ? 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.
@@ -533,13 +406,7 @@ export function create13(component) {
   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)));
+  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.
@@ -623,71 +490,33 @@ export function create14(component) {
       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] ? (h("div", { class: "title" },
-          h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]),
-          buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ? (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,
-          buttonsIds.includes(KupColumnMenuIds.BUTTON_NEW) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
-            KupColumnMenuIds.BUTTON_NEW)))) : 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] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]), buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ? (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, buttonsIds.includes(KupColumnMenuIds.BUTTON_NEW) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+    KupColumnMenuIds.BUTTON_NEW)))) : 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.
@@ -724,9 +553,7 @@ export function create15(component) {
     }
   }
   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])));
+    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 = [];
@@ -744,30 +571,23 @@ export function create15(component) {
       genericButtons.push(button);
     }
   }
-  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] ? (h("div", { class: "title" },
-          h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]),
-          buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ? (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,
-        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'),
-      h("kup-button", { title: dom.ketchup.language.translate(KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" }))) : 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] ? (h("div", { class: "title" }, h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]), buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ? (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, 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));
 }