@sme.up/ketchup 8.0.1 → 8.1.0

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

@@ -1,593 +1,593 @@
-import { h } from '@stencil/core';
-import { FImage } from '../../../f-components/f-image/f-image';
-import { compList } from '../kup-card-helper';
-import { KupLanguageColumn, KupLanguageGeneric, } from '../../../managers/kup-language/kup-language-declarations';
-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.
- * @param {KupCard} component - Card component.
- * @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));
-}
-/**
- * 2nd standard card layout, inspired by Material Design.
- * @param {KupCard} component - Card 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));
-}
-/**
- * 3rd standard card layout, inspired by Material Design.
- * @param {KupCard} component - Card 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));
-}
-/**
- * 4th standard card layout, inspired by Material Design.
- * @param {KupCard} component - Card 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') : '')));
-}
-/**
- * 5th standard card layout, useful to display TODOs with extensive information.
- * @param {KupCard} component - Card 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] : '')))));
-}
-/**
- * 6th standard card layout, useful to display TODOs in a compact view.
- * @param {KupCard} component - Card 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)));
-}
-/**
- * 7th standard card layout, centered image and text.
- * @param {KupCard} component - Card 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] : ''))));
-}
-/**
- * 8th standard card layout, useful to display a list of chips.
- * @param {KupCard} component - Card 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)));
-}
-/**
- * 9th standard card layout, chart displayed on the right with some info on the left.
- * @param {KupCard} component - Card 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)));
-}
-/**
- * 10th standard card layout, chart displayed on the left with some info on the right.
- * @param {KupCard} component - Card 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]
-    : '')))))));
-}
-/**
- * 11th standard card layout, chart displayed on the right with some info on the left, visible when hovering on the colored bar.
- * @param {KupCard} component - Card 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)));
-}
-/**
- * 12th standard card layout, used for column menus in tree and data table.
- * @param {KupCard} component - Card 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']);
-    }
-  }
-  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.
- * @param {KupCard} component - Card 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)));
-}
-/**
- * 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.
- * @param {KupCard} component - Card 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;
-      }
-    }
-  }
-  // 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 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] ? (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.
- * @param {KupCard} component - Card 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]);
-    }
-  }
-  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']);
-    }
-    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,
-    };
-    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));
-}
+import { h } from '@stencil/core';
+import { FImage } from '../../../f-components/f-image/f-image';
+import { compList } from '../kup-card-helper';
+import { KupLanguageColumn, KupLanguageGeneric, } from '../../../managers/kup-language/kup-language-declarations';
+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.
+ * @param {KupCard} component - Card component.
+ * @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));
+}
+/**
+ * 2nd standard card layout, inspired by Material Design.
+ * @param {KupCard} component - Card 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));
+}
+/**
+ * 3rd standard card layout, inspired by Material Design.
+ * @param {KupCard} component - Card 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));
+}
+/**
+ * 4th standard card layout, inspired by Material Design.
+ * @param {KupCard} component - Card 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') : '')));
+}
+/**
+ * 5th standard card layout, useful to display TODOs with extensive information.
+ * @param {KupCard} component - Card 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] : '')))));
+}
+/**
+ * 6th standard card layout, useful to display TODOs in a compact view.
+ * @param {KupCard} component - Card 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)));
+}
+/**
+ * 7th standard card layout, centered image and text.
+ * @param {KupCard} component - Card 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] : ''))));
+}
+/**
+ * 8th standard card layout, useful to display a list of chips.
+ * @param {KupCard} component - Card 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)));
+}
+/**
+ * 9th standard card layout, chart displayed on the right with some info on the left.
+ * @param {KupCard} component - Card 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)));
+}
+/**
+ * 10th standard card layout, chart displayed on the left with some info on the right.
+ * @param {KupCard} component - Card 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]
+    : '')))))));
+}
+/**
+ * 11th standard card layout, chart displayed on the right with some info on the left, visible when hovering on the colored bar.
+ * @param {KupCard} component - Card 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)));
+}
+/**
+ * 12th standard card layout, used for column menus in tree and data table.
+ * @param {KupCard} component - Card 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']);
+    }
+  }
+  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.
+ * @param {KupCard} component - Card 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)));
+}
+/**
+ * 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.
+ * @param {KupCard} component - Card 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;
+      }
+    }
+  }
+  // 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 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] ? (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.
+ * @param {KupCard} component - Card 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]);
+    }
+  }
+  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']);
+    }
+    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,
+    };
+    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));
+}