@sme.up/ketchup 8.3.3 → 9.1.0

package/dist/collection/assets/data-table-performance.js

@@ -46,6 +46,7 @@ function refreshTables() {
         for (let index = 0; index < nTables; index++) {
             const table = document.createElement('kup-data-table');
             table.data = { ...data };
+            table.editableData = true;
             //table.lazyLoadRows = true;
             //table.rowsPerPage = 10;
             table.rowsPerPage = 100000;
@@ -61,6 +62,11 @@ function createCells(i) {
         const column = data.columns[index];
         cells[column.name] = {
             value: 'Row ' + i + '; Col ' + column.name,
+            isEditable: true,
+            shape: 'INF',
+            info: {
+                icon: 'warning',
+            },
         };
     }
     return cells;

package/dist/collection/assets/data-table.js

@@ -953,6 +953,50 @@ const mockedRows = [
             },
         },
     },
+    {
+        cells: {
+            FLD1: {
+                obj: {
+                    t: 'CN',
+                    p: 'COL',
+                    k: 'CASFRA',
+                },
+                value: 'CASFRA',
+            },
+            FLD2: {
+                obj: {
+                    t: 'NR',
+                    p: '',
+                    k: '10',
+                },
+                value: '10',
+            },
+            FLD3: {
+                obj: {
+                    t: 'NR',
+                    p: '',
+                    k: '100000.60',
+                },
+                value: '100,000.60',
+            },
+            FLD4: {
+                obj: {
+                    t: 'D8',
+                    p: '*YYMD',
+                    k: '20181101',
+                },
+                value: '2018-11-01',
+            },
+            FLD5: {
+                obj: {
+                    t: 'NR',
+                    p: 'P',
+                    k: '0',
+                },
+                value: '0.00',
+            },
+        },
+    },
     {
         cells: {
             FLD1: {

package/dist/collection/assets/image-list.js

@@ -66,21 +66,11 @@ const data = [
                     {
                         cells: {
                             ROUTE: {
-                                value: 'dash',
-                            },
-                        },
-                        icon: 'thermostat-box',
-                        value: 'Dash',
-                        visible: true,
-                    },
-                    {
-                        cells: {
-                            ROUTE: {
-                                value: 'dashlist',
+                                value: 'cardlist',
                             },
                         },
                         icon: 'recent_actors',
-                        value: 'Dash list',
+                        value: 'Card list',
                         visible: true,
                     },
                     {

package/dist/collection/assets/index.js

@@ -46,6 +46,10 @@ components.data = [
         value: 'Card',
         id: 'card.html',
     },
+    {
+        value: 'Card list',
+        id: 'card-list.html',
+    },
     {
         value: 'Cell',
         id: 'cell.html',
@@ -70,10 +74,6 @@ components.data = [
         value: 'Combobox',
         id: 'combobox.html',
     },
-    {
-        value: 'Dash list',
-        id: 'dash-list.html',
-    },
     {
         value: 'Dashboard',
         id: 'dashboard.html',
@@ -162,6 +162,10 @@ components.data = [
         value: 'Planner',
         id: 'planner.html',
     },
+    {
+        value: 'Progress Bar',
+        id: 'progress-bar.html',
+    },
     {
         value: 'Radio',
         id: 'radio.html',

package/dist/collection/assets/radio.js

@@ -0,0 +1,30 @@
+const radioEls = document.querySelectorAll('kup-radio');
+radioEls.forEach((element) => {
+    element.addEventListener('kup-radio-blur', (e) => {
+        console.log('Radio has been BLURRED', e);
+    });
+    element.addEventListener('kup-radio-change', (e) => {
+        console.log('Radio has been CHANGED', e);
+    });
+    element.addEventListener('kup-radio-focus', (e) => {
+        console.log('Radio has been FOCUSED', e);
+    });
+});
+
+radioEls[0].data = [
+    {
+        value: 'Favorites',
+        label: 'label 1',
+        checked: false,
+    },
+    {
+        value: 'Set alarm clock',
+        label: 'label 2',
+        checked: true,
+    },
+    {
+        value: 'Settings',
+        label: 'label 3',
+        checked: false,
+    },
+];

package/dist/collection/collection-manifest.json

@@ -13,13 +13,12 @@
     "components/kup-button/kup-button.js",
     "components/kup-button-list/kup-button-list.js",
     "components/kup-calendar/kup-calendar.js",
+    "components/kup-card-list/kup-card-list.js",
     "components/kup-cell/kup-cell.js",
     "components/kup-checkbox/kup-checkbox.js",
     "components/kup-chip/kup-chip.js",
     "components/kup-color-picker/kup-color-picker.js",
     "components/kup-combobox/kup-combobox.js",
-    "components/kup-dash/kup-dash.js",
-    "components/kup-dash-list/kup-dash-list.js",
     "components/kup-dashboard/kup-dashboard.js",
     "components/kup-date-picker/kup-date-picker.js",
     "components/kup-dialog/kup-dialog.js",
@@ -52,8 +51,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.0.2",
-    "typescriptVersion": "5.0.4"
+    "version": "4.3.0",
+    "typescriptVersion": "5.1.6"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/kup-box/kup-box.js

@@ -231,15 +231,23 @@ export class KupBox {
   sortRows(rows) {
     let sortedRows = rows;
     if (this.sortBy) {
-      // create 'fake' sortObject
-      const sortObject = {
-        column: this.sortBy,
-        sortMode: SortMode.A,
-      };
-      sortedRows = sortRows(sortedRows, [sortObject]);
+      sortedRows = sortRows(sortedRows, this.toSortObjectList());
     }
     return sortedRows;
   }
+  toSortObjectList() {
+    const sortByArray = this.sortBy.split('|').map((col) => {
+      const colNameAndSortMode = col.split(',');
+      const sortObject = {
+        column: colNameAndSortMode[0],
+        sortMode: colNameAndSortMode.length > 1
+          ? SortMode[colNameAndSortMode[1]]
+          : SortMode.A,
+      };
+      return sortObject;
+    });
+    return sortByArray;
+  }
   checkScrollOnHover() {
     if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
       if (this.scrollOnHover) {

package/dist/collection/components/kup-calendar/kup-calendar-declarations.js

@@ -22,7 +22,7 @@ export var KupCalendarViewTypes;
   KupCalendarViewTypes["WEEK"] = "timeGridWeek";
 })(KupCalendarViewTypes || (KupCalendarViewTypes = {}));
 /**
- * Available view types.
+ * Available column options.
  */
 export var KupCalendarOptions;
 (function (KupCalendarOptions) {

package/dist/collection/components/kup-card/kup-card.css

@@ -1451,7 +1451,7 @@
 }
 .scalable-layout-2 .scalable-element {
   display: grid;
-  grid-template-columns: 1fr 1fr 0.5fr 0.5fr;
+  grid-template-columns: 0.25fr 1fr 0.5fr 0.5fr;
 }
 .scalable-layout-2 .icon {
   margin: auto;
@@ -1543,7 +1543,6 @@
   width: 100%;
   min-width: max-content;
   position: relative;
-  bottom: -10%;
 }
 
 .scalable-layout-6 #image1 img {
@@ -1587,6 +1586,7 @@
 }
 .scalable-layout-7 .value {
   font-size: 200%;
+  text-align: right;
 }
 .scalable-layout-7 .descr {
   text-align: right;
@@ -1594,7 +1594,6 @@
   width: 100%;
   min-width: max-content;
   position: relative;
-  bottom: 10%;
 }
 
 .scalable-layout-8 #image1 img {
@@ -1610,7 +1609,7 @@
   font-size: 75%;
 }
 .scalable-layout-8 .value {
-  margin: 0 10%;
+  margin: 0 8px;
   font-size: 250%;
 }
 .scalable-layout-8 .descr {
@@ -1625,7 +1624,6 @@
   display: flex;
   justify-content: unset;
   overflow: auto;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
   border-radius: 4px;
 }
 .scalable-layout-9 .section-1 {
@@ -1660,10 +1658,10 @@
 
 .scalable-card {
   align-items: center;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: var(--kup_card_scalable_box_shadow);
   border-radius: 4px;
   display: flex;
-  font-size: calc(var(--kup-font-size) * var(--kup_card_multiplier));
+  font-size: var(--kup_card_scalable_static_font_size, calc(var(--kup_card_scalable_starting_font_size) * var(--kup_card_scalable_multiplier, 1)));
   height: 100%;
   justify-content: center;
   position: relative;
@@ -2603,6 +2601,13 @@
 .standard-layout-14 .section-1 .sub-1 {
   width: 100%;
 }
+.standard-layout-14 .section-1 .top {
+  display: flex;
+  justify-content: space-between;
+}
+.standard-layout-14 .section-1 .buttons {
+  display: flex;
+}
 .standard-layout-14 .section-1 .sub-spinner {
   height: 88px;
   width: 88px;
@@ -2735,6 +2740,13 @@
 .standard-layout-15 .section-1 .sub-1 {
   width: 100%;
 }
+.standard-layout-15 .section-1 .top {
+  display: flex;
+  justify-content: space-between;
+}
+.standard-layout-15 .section-1 .buttons {
+  display: flex;
+}
 .standard-layout-15 .section-1 .sub-spinner {
   height: 88px;
   width: 88px;
@@ -2841,6 +2853,8 @@
 /**
 * @prop --kup-card-backdrop: Backdrop of the component when is visible.
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
+* @prop --kup-card-scalable-box-shadow: Box shadow of the scalable layouts.
+* @prop --kup-card-scalable-starting-font-size: Starting font size for scalable cards.
 */
 :host {
   --kup_card_backdrop: var(--kup-card-backdrop, rgba(0, 0, 0, 0.32));
@@ -2848,6 +2862,19 @@
     --kup-card-ripple-color,
     var(--kup-primary-color)
   );
+  --kup_card_scalable_box_shadow: var(
+    --kup-card-scalable-box-shadow,
+    0 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12)
+  );
+  --kup_card_scalable_starting_font_size: var(
+    --kup-card-scalable-starting-font-size,
+    3em
+  );
+  --kup_card_scalable_static_font_size: var(
+    --kup-card-scalable-static-font-size
+  );
   display: block;
   font-size: var(--kup-font-size);
   height: var(--kup_card_height);

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

@@ -324,17 +324,16 @@ export class KupCard {
   }
   /**
    * This method is invoked by the layout manager when the layout family is scalable.
-   * The content of the card (.scalable-element) will be resized to fit the wrapper (.scalable-card).
-   * The scaling is performed by using a CSS variable (--kup_card_multiplier) which will impact the card's font-size.
+   * The content of the card (.scalable-element) will be resized to fit the wrapper (kup-card).
+   * The scaling is performed by using a CSS variable (--kup_card_scalable_multiplier) which will impact the card's font-size.
    * When there is empty space, the multiplier will be increased, as will the content.
    * Viceversa, when the content exceeds the boundaries, the multiplier will be decreased.
    */
-  scalable() {
+  async scalable() {
     this.scalingActive = true;
     const root = this.rootElement.shadowRoot;
     const el = root.querySelector('.scalable-element');
-    const card = root.querySelector('.scalable-card');
-    const multiplierStep = 0.1;
+    const card = this.rootElement;
     /**
      * cardHeight sets the maximum height of the content, when exceeded the multiplier will be reduced (90%).
      */
@@ -344,37 +343,41 @@ export class KupCard {
      */
     const cardWidthLow = (85 / 100) * card.clientWidth;
     const cardWidthHigh = (95 / 100) * card.clientWidth;
-    let tooManyAttempts = 2000;
-    let multiplier = parseFloat(card.style.getPropertyValue('--kup_card_multiplier'));
-    if (multiplier < 0.1) {
-      multiplier = 1;
-    }
+    const multiplierStep = 0.1;
+    let tooManyAttempts = 75;
+    let multiplier = 1;
+    let redrawCount = 0;
+    const redraw = async () => {
+      card.style.setProperty('--kup_card_scalable_multiplier', multiplier.toFixed(1) + '');
+      this.kupManager.debug.logMessage(this, 'Redrawing scalable card (' + ++redrawCount + ').', KupDebugCategory.INFO);
+    };
+    const roundMultiplier = (m) => {
+      return parseFloat(m.toFixed(1));
+    };
+    card.style.opacity = '0';
+    card.style.transition = 'opacity 125ms ease-in';
     /**
      * Cycle to adjust the width.
      */
+    await redraw();
     while ((el.clientWidth < cardWidthLow || el.clientWidth > cardWidthHigh) &&
       tooManyAttempts > 0 &&
       multiplier > multiplierStep) {
       tooManyAttempts--;
-      if (el.clientWidth < cardWidthLow) {
-        multiplier = multiplier + multiplierStep;
-        card.style.setProperty('--kup_card_multiplier', multiplier + '');
+      if (el.clientWidth < cardWidthLow &&
+        el.clientHeight <= cardHeight) {
+        multiplier = roundMultiplier(multiplier + multiplierStep);
+        await redraw();
       }
       else if (el.clientWidth > cardWidthHigh) {
-        multiplier = multiplier - multiplierStep;
-        card.style.setProperty('--kup_card_multiplier', multiplier + '');
+        multiplier = roundMultiplier(multiplier - multiplierStep);
+        await redraw();
       }
       else {
         tooManyAttempts = 0;
       }
     }
-    /**
-     * Cycle to adjust the height, in case it exceeds its boundaries after having adjusted width.
-     */
-    while (el.clientHeight > cardHeight && multiplier > multiplierStep) {
-      multiplier = multiplier - multiplierStep;
-      card.style.setProperty('--kup_card_multiplier', multiplier + '');
-    }
+    card.style.opacity = '1';
     this.scalingActive = false;
   }
   /*-------------------------------------------------*/

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

@@ -9,16 +9,16 @@ const dom = document.documentElement;
  * @returns {VNode} 1st scalable layout virtual node.
  */
 export function create1(component) {
+  //Image color
+  const colorArray = component.data['color']
+    ? component.data['color']
+    : [];
   //Title, subtitle
   let textIndex = 0;
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "descr" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "value" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "descr" }, h("div", { style: colorArray[0] ? { color: colorArray[0] } : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "value" }, h("div", { style: colorArray[1] ? { color: colorArray[1] } : undefined }, textArray[++textIndex] ? textArray[textIndex] : '')))));
 }
 /**
  * 2nd scalable card layout, used to display numerical values.
@@ -35,17 +35,16 @@ export function create2(component) {
     ? component.data['image']
     : [];
   //Value, decimal value, measurement unit
-  let textIndex = 0;
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1.25em", sizeY: "1.25em" }))) : null), h("div", { class: "value-int" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '', ",")), h("div", { class: "value-dec" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "unit" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
+      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1.25em", sizeY: "1.25em" }))) : null), h("div", { class: "value-int" }, h("div", { style: colorArray[1] ? { color: colorArray[1] } : undefined }, textArray[0] ? textArray[0] : '', textArray[1]
+    ? dom.ketchup.math.decimalSeparator()
+    : '')), textArray[1] ? (h("div", { class: "value-dec" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[1]))) : null, h("div", { class: "unit" }, h("div", { style: colorArray[1] ? { color: colorArray[1] } : undefined }, textArray[2] ? textArray[2] : '')))));
 }
 /**
  * 3rd scalable card layout, column of 2 texts.
@@ -53,16 +52,16 @@ export function create2(component) {
  * @returns {VNode} 3rd scalable layout virtual node.
  */
 export function create3(component) {
+  //Image color
+  const colorArray = component.data['color']
+    ? component.data['color']
+    : [];
   //Title, subtitle
   let textIndex = 0;
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "value" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "value" }, h("div", { style: colorArray[0] ? { color: colorArray[0] } : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", { style: colorArray[1] ? { color: colorArray[1] } : undefined }, textArray[++textIndex] ? textArray[textIndex] : '')))));
 }
 /**
  * 4th scalable card layout, used to display numerical values with subtitle.
@@ -79,20 +78,20 @@ export function create4(component) {
     ? component.data['image']
     : [];
   //Value, decimal value, measurement unit, subtitle
-  let textIndex = 0;
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`,
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
-      ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1.25em", sizeY: "1.25em" }))) : null), h("div", { class: "value-and-unit" }, h("div", { class: "value-int" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '', ",")), h("div", { class: "value-dec" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "unit" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "empty-placeholder" }), h("div", { class: "descr" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
+      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1.25em", sizeY: "1.25em" }))) : null), h("div", { class: "value-and-unit" }, h("div", { class: "value-int" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[0] ? textArray[0] : '', textArray[1]
+    ? dom.ketchup.math.decimalSeparator()
+    : '')), textArray[1] ? (h("div", { class: "value-dec" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[1]))) : null, h("div", { class: "unit" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[2] ? textArray[2] : ''))), h("div", { class: "empty-placeholder" }), h("div", { class: "descr" }, h("div", { style: colorArray[2] ? { color: colorArray[2] } : undefined }, textArray[3] ? textArray[3] : '')))));
 }
 /**
  * 5th scalable card layout, icon with title and subtitle.
@@ -113,11 +112,11 @@ export function create5(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "text-wrapper" }, h("div", { class: "descr" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "value" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "text-wrapper" }, h("div", { class: "descr" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "value" }, h("div", { style: colorArray[2]
+      ? { color: colorArray[2] }
+      : undefined }, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
       : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null))));
 }
@@ -140,13 +139,13 @@ export function create6(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "value" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''))))));
+      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null), h("div", { class: "text-wrapper" }, h("div", { class: "value" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", { style: colorArray[2]
+      ? { color: colorArray[2] }
+      : undefined }, textArray[++textIndex] ? textArray[textIndex] : ''))))));
 }
 /**
  * 7th scalable card layout, icon with title and subtitle.
@@ -167,11 +166,11 @@ export function create7(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "text-wrapper" }, h("div", { class: "value" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "text-wrapper" }, h("div", { class: "value" }, h("div", { style: colorArray[1]
+      ? { color: colorArray[1] }
+      : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", { style: colorArray[2]
+      ? { color: colorArray[2] }
+      : undefined }, textArray[++textIndex] ? textArray[textIndex] : ''))), h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
       : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null))));
 }
@@ -194,13 +193,9 @@ export function create8(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    ['--kup_card_multiplier']: '1',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card`, style: CSSVariables }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
+  return (h("div", { class: `scalable-layout-${component.layoutNumber} scalable-card` }, h("div", { class: "scalable-element" }, h("div", { class: "icon" }, imageArray[0] ? (h(FImage, Object.assign({ color: colorArray[0]
       ? colorArray[0]
-      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null), h("div", { class: "value" }, h("div", null, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
+      : `var(${KupThemeColorValues.PRIMARY})`, id: "image1" }, imageArray[0], { sizeX: "1em", sizeY: "1em" }))) : null), h("div", { class: "value" }, h("div", { style: colorArray[1] ? { color: colorArray[1] } : undefined }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "descr" }, h("div", { style: colorArray[2] ? { color: colorArray[2] } : undefined }, textArray[++textIndex] ? textArray[textIndex] : '')))));
 }
 /**
  * 9th scalable card layout, tile view.
@@ -243,9 +238,5 @@ export function create9(component) {
     ['--color-1']: componentBg,
     ['--color-2']: textFg,
   };
-  const CSSVariablesChild = {
-    ['--kup_card_multiplier']: '1',
-    ['box-shadow']: 'none',
-  };
-  return (h("div", { class: `scalable-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "scalable-card", style: CSSVariablesChild }, h("div", { class: "text scalable-element" }, h("div", { class: "value" }, mainText), h("div", { class: "descr" }, subText))), buttons.length > 0 ? (h("div", { class: "buttons" }, buttons.map((b) => (h(FButton, { icon: b.icon, title: b.title, styling: b.styling, wrapperClass: b.class, onClick: () => component.onKupClick(component.rootElement.id, b.id) }))))) : undefined)));
+  return (h("div", { class: `scalable-layout-${component.layoutNumber}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "scalable-card" }, h("div", { class: "text scalable-element" }, h("div", { class: "value" }, mainText), h("div", { class: "descr" }, subText))), buttons.length > 0 ? (h("div", { class: "buttons" }, buttons.map((b) => (h(FButton, { icon: b.icon, title: b.title, styling: b.styling, wrapperClass: b.class, onClick: () => component.onKupClick(component.rootElement.id, b.id) }))))) : undefined)));
 }