@sme.up/ketchup 8.3.2 → 9.0.0

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;
@@ -2841,6 +2839,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 +2848,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

@@ -1,21 +1,21 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { MDCRipple } from '@material/ripple';
-import * as boxLayouts from './box/kup-card-box';
-import * as builtInLayouts from './built-in/kup-card-built-in';
-import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
-import * as dialogLayouts from './dialog/kup-card-dialog';
-import * as freeLayouts from './free/kup-card-free';
-import * as scalableLayouts from './scalable/kup-card-scalable';
-import * as standardLayouts from './standard/kup-card-standard';
-import Picker from 'vanilla-picker';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { KupCardFamily, KupCardCSSClasses, KupCardIds, KupCardProps, } from './kup-card-declarations';
-import { FImage } from '../../f-components/f-image/f-image';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { layoutSpecificEvents } from './kup-card-helper';
-import { getProps, setProps } from '../../utils/utils';
-import { componentWrapperId } from '../../variables/GenericVariables';
+import { forceUpdate, h, Host, } from "@stencil/core";
+import { MDCRipple } from "@material/ripple";
+import * as boxLayouts from "./box/kup-card-box";
+import * as builtInLayouts from "./built-in/kup-card-built-in";
+import * as collapsibleLayouts from "./collapsible/kup-card-collapsible";
+import * as dialogLayouts from "./dialog/kup-card-dialog";
+import * as freeLayouts from "./free/kup-card-free";
+import * as scalableLayouts from "./scalable/kup-card-scalable";
+import * as standardLayouts from "./standard/kup-card-standard";
+import Picker from "vanilla-picker";
+import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
+import { KupCardFamily, KupCardCSSClasses, KupCardIds, KupCardProps, } from "./kup-card-declarations";
+import { FImage } from "../../f-components/f-image/f-image";
+import { KupDebugCategory } from "../../managers/kup-debug/kup-debug-declarations";
+import { KupLanguageGeneric } from "../../managers/kup-language/kup-language-declarations";
+import { layoutSpecificEvents } from "./kup-card-helper";
+import { getProps, setProps } from "../../utils/utils";
+import { componentWrapperId } from "../../variables/GenericVariables";
 export class KupCard {
   constructor() {
     /*-------------------------------------------------*/
@@ -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;
   }
   /*-------------------------------------------------*/
@@ -477,7 +480,8 @@ export class KupCard {
           "references": {
             "KupCardData": {
               "location": "import",
-              "path": "./kup-card-declarations"
+              "path": "./kup-card-declarations",
+              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardData"
             }
           }
         },
@@ -522,7 +526,8 @@ export class KupCard {
           "references": {
             "KupCardFamily": {
               "location": "import",
-              "path": "./kup-card-declarations"
+              "path": "./kup-card-declarations",
+              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardFamily"
             }
           }
         },
@@ -642,7 +647,8 @@ export class KupCard {
           "references": {
             "KupCardClickPayload": {
               "location": "import",
-              "path": "./kup-card-declarations"
+              "path": "./kup-card-declarations",
+              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardClickPayload"
             }
           }
         }
@@ -662,7 +668,8 @@ export class KupCard {
           "references": {
             "KupEventPayload": {
               "location": "import",
-              "path": "../../types/GenericTypes"
+              "path": "../../types/GenericTypes",
+              "id": "src/types/GenericTypes.ts::KupEventPayload"
             }
           }
         }
@@ -682,7 +689,8 @@ export class KupCard {
           "references": {
             "KupCardEventPayload": {
               "location": "import",
-              "path": "./kup-card-declarations"
+              "path": "./kup-card-declarations",
+              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardEventPayload"
             }
           }
         }
@@ -702,7 +710,8 @@ export class KupCard {
           "references": {
             "KupEventPayload": {
               "location": "import",
-              "path": "../../types/GenericTypes"
+              "path": "../../types/GenericTypes",
+              "id": "src/types/GenericTypes.ts::KupEventPayload"
             }
           }
         }
@@ -722,11 +731,13 @@ export class KupCard {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "GenericObject": {
               "location": "import",
-              "path": "../../types/GenericTypes"
+              "path": "../../types/GenericTypes",
+              "id": "src/types/GenericTypes.ts::GenericObject"
             }
           },
           "return": "Promise<GenericObject>"
@@ -748,7 +759,8 @@ export class KupCard {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -764,7 +776,8 @@ export class KupCard {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -786,11 +799,13 @@ export class KupCard {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "GenericObject": {
               "location": "import",
-              "path": "../../types/GenericTypes"
+              "path": "../../types/GenericTypes",
+              "id": "src/types/GenericTypes.ts::GenericObject"
             }
           },
           "return": "Promise<void>"

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

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { FImage } from '../../../f-components/f-image/f-image';
-import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
-import { FButton } from '../../../f-components/f-button/f-button';
+import { h } from "@stencil/core";
+import { FImage } from "../../../f-components/f-image/f-image";
+import { KupThemeColorValues } from "../../../managers/kup-theme/kup-theme-declarations";
+import { FButton } from "../../../f-components/f-button/f-button";
 const dom = document.documentElement;
 /**
  * 1st scalable card layout, column of 2 texts.
@@ -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)));
 }

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

@@ -1,12 +1,12 @@
-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';
+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.

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

@@ -0,0 +1,13 @@
+/**
+ * Props of the kup-card-list component.
+ * Used to export every prop in an object.
+ */
+export var KupCardListProps;
+(function (KupCardListProps) {
+  KupCardListProps["columnsNumber"] = "Sets the number of columns.";
+  KupCardListProps["customStyle"] = "Custom style of the component.";
+  KupCardListProps["data"] = "Actual data of the component.";
+  KupCardListProps["fullWidth"] = "Sets whether the component occupies all available width.";
+  KupCardListProps["horizontal"] = "Sets whether the cards are placed horizontally or not.";
+  KupCardListProps["isClickable"] = "Sets whether a single card is clickable or not.";
+})(KupCardListProps || (KupCardListProps = {}));

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

@@ -0,0 +1,34 @@
+/**
+* @prop --kup-cardlist-cards-max-height: Sets the max height of the cards.
+* @prop --kup-cardlist-cards-min-height: Sets the min height of the cards.
+* @prop --kup-cardlist-cards-max-width: Sets the max width of the cards.
+* @prop --kup-cardlist-cards-min-width: Sets the min width of the cards.
+*/
+:host {
+  --kup_cardlist_cards_max_height: var(--kup-cardlist-cards-max-height, unset);
+  --kup_cardlist_cards_min_height: var(--kup-cardlist-cards-min-height, unset);
+  --kup_cardlist_cards_max_width: var(--kup-cardlist-cards-max-width, unset);
+  --kup_cardlist_cards_min_width: var(--kup-cardlist-cards-min-width, unset);
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+#kup-component {
+  height: 100%;
+  width: 100%;
+}
+
+kup-card {
+  max-height: var(--kup_cardlist_cards_max_height);
+  min-height: var(--kup_cardlist_cards_min_height);
+  max-width: var(--kup_cardlist_cards_max_width);
+  min-width: var(--kup_cardlist_cards_min_width);
+}
+kup-card.is-clickable {
+  cursor: pointer;
+}
+
+kup-grid {
+  --kup-grid-padding: 0;
+}