@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js

@@ -4,162 +4,162 @@ import { KupLanguageColumn, KupLanguageGeneric, KupLanguageTotals, } from "../..
 import { KupDataNewColumnTypes } from "../../../managers/kup-data/kup-data-declarations";
 const dom = document.documentElement;
 const premadeFormulas = [
-  KupLanguageTotals.AVERAGE,
-  KupLanguageTotals.DIFFERENCE,
-  KupLanguageTotals.PRODUCT,
-  KupLanguageTotals.SUM,
+    KupLanguageTotals.AVERAGE,
+    KupLanguageTotals.DIFFERENCE,
+    KupLanguageTotals.PRODUCT,
+    KupLanguageTotals.SUM,
 ];
 export function prepareColumnDropMenu(component) {
-  const options = component.data.options;
-  const chipData = [];
-  let list, combobox, button, chipSet;
-  for (let index = 0; index < options.data.columns.length; index++) {
-    const column = options.data.columns[index];
-    if (column.visible !== false &&
-      column.obj &&
-      dom.ketchup.objects.isNumber(column.obj)) {
-      chipData.push({
-        obj: column.obj,
-        value: column.name,
-        title: column.title,
-        id: column.name,
-      });
+    const options = component.data.options;
+    const chipData = [];
+    let list, combobox, button, chipSet;
+    for (let index = 0; index < options.data.columns.length; index++) {
+        const column = options.data.columns[index];
+        if (column.visible !== false &&
+            column.obj &&
+            dom.ketchup.objects.isNumber(column.obj)) {
+            chipData.push({
+                obj: column.obj,
+                value: column.name,
+                title: column.title,
+                id: column.name,
+            });
+        }
     }
-  }
-  const numericalColumnsExist = !!(chipData.length > 0);
-  if (options.enableMerge || options.enableMove) {
-    list = prepareList(options);
-  }
-  if (options.enableFormula) {
-    combobox = prepareCombobox(options, numericalColumnsExist);
-    if (numericalColumnsExist) {
-      button = (h("kup-button", { "onKup-button-click": () => applyFormula(component), label: dom.ketchup.language.translate(KupLanguageTotals.CALCULATE), styling: FButtonStyling.OUTLINED }));
-      chipSet = (h("div", { class: "sub-chip" }, h("kup-chip", { data: chipData, "onKup-chip-click": (e) => typeColumn(e, component) })));
+    const numericalColumnsExist = !!(chipData.length > 0);
+    if (options.enableMerge || options.enableMove) {
+        list = prepareList(options);
     }
-  }
-  return [list, combobox, button, chipSet];
+    if (options.enableFormula) {
+        combobox = prepareCombobox(options, numericalColumnsExist);
+        if (numericalColumnsExist) {
+            button = (h("kup-button", { "onKup-button-click": () => applyFormula(component), label: dom.ketchup.language.translate(KupLanguageTotals.CALCULATE), styling: FButtonStyling.OUTLINED }));
+            chipSet = (h("div", { class: "sub-chip" }, h("kup-chip", { data: chipData, "onKup-chip-click": (e) => typeColumn(e, component) })));
+        }
+    }
+    return [list, combobox, button, chipSet];
 }
 function prepareList(options) {
-  const listData = [];
-  if (options.enableMerge) {
-    listData.push({
-      icon: 'library_add',
-      id: KupLanguageGeneric.MERGE,
-      value: dom.ketchup.language.translate(KupLanguageGeneric.MERGE),
-    });
-  }
-  if (options.enableMove) {
-    listData.push({
-      icon: 'swap_horiz',
-      id: KupLanguageGeneric.MOVE,
-      value: dom.ketchup.language.translate(KupLanguageGeneric.MOVE),
-    });
-  }
-  return listData.length > 0 ? (h("kup-list", { data: listData, showIcons: true, "onkup-list-click": (e) => listClick(e, options) })) : null;
+    const listData = [];
+    if (options.enableMerge) {
+        listData.push({
+            icon: 'library_add',
+            id: KupLanguageGeneric.MERGE,
+            value: dom.ketchup.language.translate(KupLanguageGeneric.MERGE),
+        });
+    }
+    if (options.enableMove) {
+        listData.push({
+            icon: 'swap_horiz',
+            id: KupLanguageGeneric.MOVE,
+            value: dom.ketchup.language.translate(KupLanguageGeneric.MOVE),
+        });
+    }
+    return listData.length > 0 ? (h("kup-list", { data: listData, showIcons: true, "onkup-list-click": (e) => listClick(e, options) })) : null;
 }
 function prepareCombobox(options, numericalColumnsExist) {
-  const comboListData = [];
-  const numeric = dom.ketchup.objects.isNumber(options.receivingColumn.obj) &&
-    dom.ketchup.objects.isNumber(options.starterColumn.obj);
-  if (numeric) {
-    comboListData.push({
-      id: KupLanguageTotals.AVERAGE,
-      value: dom.ketchup.language.translate(KupLanguageTotals.AVERAGE),
-    }, {
-      id: KupLanguageTotals.DIFFERENCE,
-      value: dom.ketchup.language.translate(KupLanguageTotals.DIFFERENCE),
-    }, {
-      id: KupLanguageTotals.PRODUCT,
-      value: dom.ketchup.language.translate(KupLanguageTotals.PRODUCT),
-    }, {
-      id: KupLanguageTotals.SUM,
-      value: dom.ketchup.language.translate(KupLanguageTotals.SUM),
-    }, {
-      id: `([${options.starterColumn.name}]/[${options.receivingColumn.name}])*100`,
-      value: `[${options.starterColumn.name}] / [${options.receivingColumn.name}] * 100`,
-    }, {
-      id: `([${options.receivingColumn.name}]/[${options.starterColumn.name}])*100`,
-      value: `[${options.receivingColumn.name}] / [${options.starterColumn.name}] * 100`,
-    });
-  }
-  else {
-    comboListData.push({
-      id: KupLanguageColumn.NO_FORMULA,
-      value: dom.ketchup.language.translate(KupLanguageColumn.NO_FORMULA),
-    });
-  }
-  const comboData = {
-    'kup-list': {
-      data: comboListData,
-      selectable: numeric ? true : false,
-    },
-    'kup-text-field': {
-      helper: !numericalColumnsExist
-        ? dom.ketchup.language.translate(KupLanguageColumn.NON_NUMERICAL_IN_TABLE)
-        : numeric
-          ? `i.e.: [${options.receivingColumn.name}] - [${options.starterColumn.name}] + 1`
-          : dom.ketchup.language.translate(KupLanguageColumn.NON_NUMERICAL),
-      label: dom.ketchup.language.translate(KupLanguageTotals.FORMULA),
-      outlined: true,
-    },
-  };
-  return (h("kup-combobox", { data: comboData, disabled: !numericalColumnsExist }));
+    const comboListData = [];
+    const numeric = dom.ketchup.objects.isNumber(options.receivingColumn.obj) &&
+        dom.ketchup.objects.isNumber(options.starterColumn.obj);
+    if (numeric) {
+        comboListData.push({
+            id: KupLanguageTotals.AVERAGE,
+            value: dom.ketchup.language.translate(KupLanguageTotals.AVERAGE),
+        }, {
+            id: KupLanguageTotals.DIFFERENCE,
+            value: dom.ketchup.language.translate(KupLanguageTotals.DIFFERENCE),
+        }, {
+            id: KupLanguageTotals.PRODUCT,
+            value: dom.ketchup.language.translate(KupLanguageTotals.PRODUCT),
+        }, {
+            id: KupLanguageTotals.SUM,
+            value: dom.ketchup.language.translate(KupLanguageTotals.SUM),
+        }, {
+            id: `([${options.starterColumn.name}]/[${options.receivingColumn.name}])*100`,
+            value: `[${options.starterColumn.name}] / [${options.receivingColumn.name}] * 100`,
+        }, {
+            id: `([${options.receivingColumn.name}]/[${options.starterColumn.name}])*100`,
+            value: `[${options.receivingColumn.name}] / [${options.starterColumn.name}] * 100`,
+        });
+    }
+    else {
+        comboListData.push({
+            id: KupLanguageColumn.NO_FORMULA,
+            value: dom.ketchup.language.translate(KupLanguageColumn.NO_FORMULA),
+        });
+    }
+    const comboData = {
+        'kup-list': {
+            data: comboListData,
+            selectable: numeric ? true : false,
+        },
+        'kup-text-field': {
+            helper: !numericalColumnsExist
+                ? dom.ketchup.language.translate(KupLanguageColumn.NON_NUMERICAL_IN_TABLE)
+                : numeric
+                    ? `i.e.: [${options.receivingColumn.name}] - [${options.starterColumn.name}] + 1`
+                    : dom.ketchup.language.translate(KupLanguageColumn.NON_NUMERICAL),
+            label: dom.ketchup.language.translate(KupLanguageTotals.FORMULA),
+            outlined: true,
+        },
+    };
+    return (h("kup-combobox", { data: comboData, disabled: !numericalColumnsExist }));
 }
 function getCombobox(component) {
-  return component.rootElement.shadowRoot.querySelector('kup-combobox');
+    return component.rootElement.shadowRoot.querySelector('kup-combobox');
 }
 function typeColumn(e, component) {
-  const combobox = getCombobox(component);
-  const value = e.detail.chip.value;
-  combobox.getValue().then((res) => {
-    let currentFormula = res;
-    currentFormula += '[' + value + ']';
-    combobox.setValue(currentFormula);
-  });
+    const combobox = getCombobox(component);
+    const value = e.detail.chip.value;
+    combobox.getValue().then((res) => {
+        let currentFormula = res;
+        currentFormula += '[' + value + ']';
+        combobox.setValue(currentFormula);
+    });
 }
 function listClick(e, options) {
-  switch (e.detail.selected.id) {
-    case KupLanguageGeneric.MERGE:
-      if (options.mergeCb) {
-        options.mergeCb();
-      }
-      break;
-    case KupLanguageGeneric.MOVE:
-      if (options.moveCb) {
-        options.moveCb();
-      }
-      break;
-  }
+    switch (e.detail.selected.id) {
+        case KupLanguageGeneric.MERGE:
+            if (options.mergeCb) {
+                options.mergeCb();
+            }
+            break;
+        case KupLanguageGeneric.MOVE:
+            if (options.moveCb) {
+                options.moveCb();
+            }
+            break;
+    }
 }
 async function applyFormula(component) {
-  const options = component.data.options;
-  const combobox = getCombobox(component);
-  if (combobox) {
-    const value = (await combobox.getValue());
-    if (premadeFormulas.includes(value)) {
-      dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
-        columns: [
-          options.receivingColumn.name,
-          options.starterColumn.name,
-        ],
-        operation: value,
-      });
-      if (options.formulaCb !== undefined) {
-        options.formulaCb();
-      }
-    }
-    else {
-      const result = dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
-        operation: value,
-      });
-      if (typeof result === 'string' || result instanceof String) {
-        combobox.classList.add('kup-danger');
-        combobox.data['kup-text-field'].helper = result;
-        combobox.refresh();
-      }
-      else if (options.formulaCb !== undefined) {
-        options.formulaCb();
-      }
+    const options = component.data.options;
+    const combobox = getCombobox(component);
+    if (combobox) {
+        const value = (await combobox.getValue());
+        if (premadeFormulas.includes(value)) {
+            dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
+                columns: [
+                    options.receivingColumn.name,
+                    options.starterColumn.name,
+                ],
+                operation: value,
+            });
+            if (options.formulaCb !== undefined) {
+                options.formulaCb();
+            }
+        }
+        else {
+            const result = dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
+                operation: value,
+            });
+            if (typeof result === 'string' || result instanceof String) {
+                combobox.classList.add('kup-danger');
+                combobox.data['kup-text-field'].helper = result;
+                combobox.refresh();
+            }
+            else if (options.formulaCb !== undefined) {
+                options.formulaCb();
+            }
+        }
     }
-  }
 }

package/dist/collection/components/kup-card/built-in/kup-card-message-box.js

@@ -4,7 +4,7 @@ import { FButtonStyling } from "../../../f-components/f-button/f-button-declarat
 import { KupLanguageGeneric } from "../../../managers/kup-language/kup-language-declarations";
 const dom = document.documentElement;
 export function prepareMessageBox(component) {
-  const options = component.data.options;
-  const buttonsExist = !!(options.cancelCb || options.confirmCb);
-  return (h("div", { class: "message-box" }, options.text ? h("div", { class: "text" }, options.text) : null, buttonsExist ? (h("div", { class: "button-wrapper" }, options.cancelCb ? (h(FButton, { icon: "clear", label: dom.ketchup.language.translate(KupLanguageGeneric.ABORT), onClick: options.cancelCb, styling: FButtonStyling.FLAT })) : null, options.confirmCb ? (h(FButton, { icon: "check", label: dom.ketchup.language.translate(KupLanguageGeneric.CONFIRM), onClick: options.confirmCb })) : null)) : null));
+    const options = component.data.options;
+    const buttonsExist = !!(options.cancelCb || options.confirmCb);
+    return (h("div", { class: "message-box" }, options.text ? h("div", { class: "text" }, options.text) : null, buttonsExist ? (h("div", { class: "button-wrapper" }, options.cancelCb ? (h(FButton, { icon: "clear", label: dom.ketchup.language.translate(KupLanguageGeneric.ABORT), onClick: options.cancelCb, styling: FButtonStyling.FLAT })) : null, options.confirmCb ? (h(FButton, { icon: "check", label: dom.ketchup.language.translate(KupLanguageGeneric.CONFIRM), onClick: options.confirmCb })) : null)) : null));
 }

package/dist/collection/components/kup-card/built-in/kup-card-numeric.js

@@ -3,116 +3,116 @@ import { FButton } from "../../../f-components/f-button/f-button";
 const dom = document.documentElement;
 const maximumFractionDigits = 14;
 export function prepareNumeric(component) {
-  const el = component.rootElement;
-  if (!el.kupData)
-    el.kupData = {
-      value: null,
-      localeValue: '',
+    const el = component.rootElement;
+    if (!el.kupData)
+        el.kupData = {
+            value: null,
+            localeValue: '',
+        };
+    let decimals = false;
+    let negative = false;
+    const options = getOptions(component);
+    if (options.resetStatus) {
+        el.kupData = {
+            value: null,
+            localeValue: '',
+        };
+        const obj = options.initialValue;
+        if (options.initialValue) {
+            if (obj && obj.k)
+                el.kupData.value = obj.k;
+            else
+                el.kupData.value = options.initialValue.toString();
+            el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(el.kupData.value);
+        }
+        options.resetStatus = false;
+    }
+    if (options.negative)
+        negative = true;
+    if (options.decimals)
+        decimals = true;
+    const clearButtonProp = {
+        icon: 'cancel',
+        onClick: () => clearValue(component),
     };
-  let decimals = false;
-  let negative = false;
-  const options = getOptions(component);
-  if (options.resetStatus) {
-    el.kupData = {
-      value: null,
-      localeValue: '',
+    const saveButtonProp = {
+        icon: 'save',
+        onClick: () => saveValue(component),
     };
-    const obj = options.initialValue;
-    if (options.initialValue) {
-      if (obj && obj.k)
-        el.kupData.value = obj.k;
-      else
-        el.kupData.value = options.initialValue.toString();
-      el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(el.kupData.value);
-    }
-    options.resetStatus = false;
-  }
-  if (options.negative)
-    negative = true;
-  if (options.decimals)
-    decimals = true;
-  const clearButtonProp = {
-    icon: 'cancel',
-    onClick: () => clearValue(component),
-  };
-  const saveButtonProp = {
-    icon: 'save',
-    onClick: () => saveValue(component),
-  };
-  const decChar = getDecimalChar();
-  return (h("table", null, h("tr", null, h("td", { colSpan: 3 }, h("div", { class: "value" }, el.kupData.localeValue))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))), h("tr", null, h("td", null, negative
-    ? [
-      h("div", { class: "number", onClick: () => setSign(component) }, "-"),
-    ]
-    : []), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")), h("td", null, decimals
-    ? [
-      h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
-    ]
-    : [])), h("tr", null, h("td", null), h("td", null, h(FButton, Object.assign({}, clearButtonProp))), h("td", null, h(FButton, Object.assign({}, saveButtonProp))))));
+    const decChar = getDecimalChar();
+    return (h("table", null, h("tr", null, h("td", { colSpan: 3 }, h("div", { class: "value" }, el.kupData.localeValue))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))), h("tr", null, h("td", null, negative
+        ? [
+            h("div", { class: "number", onClick: () => setSign(component) }, "-"),
+        ]
+        : []), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")), h("td", null, decimals
+        ? [
+            h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
+        ]
+        : [])), h("tr", null, h("td", null), h("td", null, h(FButton, Object.assign({}, clearButtonProp))), h("td", null, h(FButton, Object.assign({}, saveButtonProp))))));
 }
 function getOptions(component) {
-  if (component.data.options)
-    return component.data.options;
-  else
-    return { resetStatus: false };
+    if (component.data.options)
+        return component.data.options;
+    else
+        return { resetStatus: false };
 }
 function setSign(component) {
-  const el = component.rootElement;
-  let strVal = el.kupData.value ? el.kupData.value : '0';
-  if (strVal.startsWith('-'))
-    return;
-  strVal = '-' + strVal;
-  el.kupData.value = strVal;
-  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
-  component.refresh();
+    const el = component.rootElement;
+    let strVal = el.kupData.value ? el.kupData.value : '0';
+    if (strVal.startsWith('-'))
+        return;
+    strVal = '-' + strVal;
+    el.kupData.value = strVal;
+    el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+    component.refresh();
 }
 function setValue(component, value) {
-  const options = getOptions(component);
-  const el = component.rootElement;
-  const decChar = '.';
-  let strVal = el.kupData.value ? el.kupData.value.toString() : '0';
-  // if the first value is 0 and the character you want to insert is not a comma, I clear the field.
-  if (strVal == '0' && value != decChar) {
-    strVal = '';
-  }
-  // if I have already entered a decimal sign I stop.
-  if (value == decChar && strVal.includes(decChar))
-    return;
-  // if the text field contains the maximum number entered, excluding the comma, I stop.
-  if (options.maxLength &&
-    strVal.replace(decChar, '').length == options.maxLength)
-    return;
-  // if a maximum number of integers is required, and I don't have the comma, I check to be right with the values.
-  if (options.maxIntegers &&
-    value != decChar &&
-    !strVal.includes(decChar) &&
-    strVal.length == options.maxIntegers)
-    return;
-  // if a maximum number of decimals has been requested, check where we are.
-  if (options.maxDecimals &&
-    strVal.includes(decChar) &&
-    strVal.substring(strVal.indexOf(decChar) + 1).length ==
-      options.maxDecimals)
-    return;
-  // if the maximum number of decimals in JS has been reached, I stop.
-  if (strVal.includes(decChar) &&
-    strVal.substring(strVal.indexOf(decChar) + 1).length == 14)
-    return;
-  strVal += value;
-  el.kupData.value = strVal;
-  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
-  component.refresh();
+    const options = getOptions(component);
+    const el = component.rootElement;
+    const decChar = '.';
+    let strVal = el.kupData.value ? el.kupData.value.toString() : '0';
+    // if the first value is 0 and the character you want to insert is not a comma, I clear the field.
+    if (strVal == '0' && value != decChar) {
+        strVal = '';
+    }
+    // if I have already entered a decimal sign I stop.
+    if (value == decChar && strVal.includes(decChar))
+        return;
+    // if the text field contains the maximum number entered, excluding the comma, I stop.
+    if (options.maxLength &&
+        strVal.replace(decChar, '').length == options.maxLength)
+        return;
+    // if a maximum number of integers is required, and I don't have the comma, I check to be right with the values.
+    if (options.maxIntegers &&
+        value != decChar &&
+        !strVal.includes(decChar) &&
+        strVal.length == options.maxIntegers)
+        return;
+    // if a maximum number of decimals has been requested, check where we are.
+    if (options.maxDecimals &&
+        strVal.includes(decChar) &&
+        strVal.substring(strVal.indexOf(decChar) + 1).length ==
+            options.maxDecimals)
+        return;
+    // if the maximum number of decimals in JS has been reached, I stop.
+    if (strVal.includes(decChar) &&
+        strVal.substring(strVal.indexOf(decChar) + 1).length == 14)
+        return;
+    strVal += value;
+    el.kupData.value = strVal;
+    el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+    component.refresh();
 }
 function clearValue(component) {
-  const el = component.rootElement;
-  el.kupData.value = null;
-  el.kupData.localeValue = '';
-  component.refresh();
+    const el = component.rootElement;
+    el.kupData.value = null;
+    el.kupData.localeValue = '';
+    component.refresh();
 }
 function getDecimalChar() {
-  return (0.1).toLocaleString(dom.ketchup.math.locale).substring(1, 2);
+    return (0.1).toLocaleString(dom.ketchup.math.locale).substring(1, 2);
 }
 function saveValue(component) {
-  const el = component.rootElement;
-  component.onKupClick(component.rootElement.id, el.kupData.value ? Number(el.kupData.value).toString() : '');
+    const el = component.rootElement;
+    component.onKupClick(component.rootElement.id, el.kupData.value ? Number(el.kupData.value).toString() : '');
 }

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

@@ -10,26 +10,26 @@ const dom = document.documentElement;
  * @returns {VNode} 1st collapsible layout virtual node.
  */
 export function create1(component) {
-  //Chips
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  //Bar color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //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: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-1" }, h("div", { class: "text left" }, textArray[textIndex] ? textArray[textIndex] : ''), h("div", { class: "text right" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: `sub-3 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
+    //Chips
+    const chipArray = component.data['chip']
+        ? component.data['chip']
+        : [];
+    //Bar color
+    const colorArray = component.data['color']
+        ? component.data['color']
+        : [];
+    //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: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-1" }, h("div", { class: "text left" }, textArray[textIndex] ? textArray[textIndex] : ''), h("div", { class: "text right" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: `sub-3 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
 }
 /**
  * 2nd collapsible card layout, colored text and icon in top right corner.
@@ -37,28 +37,28 @@ export function create1(component) {
  * @returns {VNode} 2nd collapsible layout virtual node.
  */
 export function create2(component) {
-  //Chips
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  //Icon and 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: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, 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: `sub-4 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
+    //Chips
+    const chipArray = component.data['chip']
+        ? component.data['chip']
+        : [];
+    //Icon and 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: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, 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: `sub-4 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
 }