@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

package/dist/collection/components/kup-card/{builtin → built-in}/kup-card-clock.js

@@ -1,8 +1,8 @@
 import { h } from '@stencil/core';
 import { FButton } from '../../../f-components/f-button/f-button';
 import { FButtonStyling, } from '../../../f-components/f-button/f-button-declarations';
-import { KupDatesFormats } from '../../../utils/kup-dates/kup-dates-declarations';
-import { KupCardBuiltinClockElements, KupCardCSSClasses, } from '../kup-card-declarations';
+import { KupDatesFormats } from '../../../managers/kup-dates/kup-dates-declarations';
+import { KupCardBuiltInClockElements, KupCardCSSClasses, } from '../kup-card-declarations';
 const dom = document.documentElement;
 export function prepareClock(component) {
   const el = component.rootElement;
@@ -106,7 +106,7 @@ function isRelatedTargetInThisComponent(e, component) {
   if (id == null || id.trim() == '') {
     return false;
   }
-  if (id == getElement(component, KupCardBuiltinClockElements.CLOCK).id) {
+  if (id == getElement(component, KupCardBuiltInClockElements.CLOCK).id) {
     return true;
   }
   let idConc = '#clock-div#confirm#';
@@ -142,31 +142,31 @@ function createClock(component) {
   }
   let seconds;
   let time = [
-    h("span", { id: KupCardBuiltinClockElements.HOURS, class: `h ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    h("span", { id: KupCardBuiltInClockElements.HOURS, class: `h ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       }, onClick: () => {
         setClockViewActive(component, true, false, false);
-        switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+        switchView(component, KupCardBuiltInClockElements.HOURS, KupCardBuiltInClockElements.HOURSCIRCLE);
       }, innerHTML: hh }),
     ':',
-    h("span", { id: KupCardBuiltinClockElements.MINUTES, class: `m ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    h("span", { id: KupCardBuiltInClockElements.MINUTES, class: `m ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       }, onClick: () => {
         setClockViewActive(component, false, true, false);
-        switchView(component, KupCardBuiltinClockElements.MINUTES, KupCardBuiltinClockElements.MINUTESCIRCLE);
+        switchView(component, KupCardBuiltInClockElements.MINUTES, KupCardBuiltInClockElements.MINUTESCIRCLE);
       }, innerHTML: mm }),
   ];
   if (isManageSeconds(component)) {
-    seconds = (h("div", { id: KupCardBuiltinClockElements.SECONDSCIRCLE, class: `circle seconds ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    seconds = (h("div", { id: KupCardBuiltInClockElements.SECONDSCIRCLE, class: `circle seconds ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       } },
       buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss, component),
       h("div", { class: "mid" })));
-    time.push(':', h("span", { id: KupCardBuiltinClockElements.SECONDS, class: `s ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    time.push(':', h("span", { id: KupCardBuiltInClockElements.SECONDS, class: `s ${getSecondsActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       }, onClick: () => {
         setClockViewActive(component, false, false, true);
-        switchView(component, KupCardBuiltinClockElements.SECONDS, KupCardBuiltinClockElements.SECONDSCIRCLE);
+        switchView(component, KupCardBuiltInClockElements.SECONDS, KupCardBuiltInClockElements.SECONDSCIRCLE);
       }, innerHTML: ss }));
   }
   const confirmButtonProp = {
@@ -176,17 +176,17 @@ function createClock(component) {
       setTimeFromClock(e, component);
     },
   };
-  return (h("div", { class: "clock", id: KupCardBuiltinClockElements.CLOCK, ref: (el) => {
+  return (h("div", { class: "clock", id: KupCardBuiltInClockElements.CLOCK, ref: (el) => {
       setElement(component, el);
     } },
     h("div", { class: "top" }, time),
-    h("div", { id: KupCardBuiltinClockElements.HOURSCIRCLE, class: `circle hours ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    h("div", { id: KupCardBuiltInClockElements.HOURSCIRCLE, class: `circle hours ${getHoursActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       } },
       buildClock(12, 101, 105, 105, 'hour', 0, 1, hh, component),
       buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh, component),
       h("div", { class: "mid" })),
-    h("div", { id: KupCardBuiltinClockElements.MINUTESCIRCLE, class: `circle minutes ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
+    h("div", { id: KupCardBuiltInClockElements.MINUTESCIRCLE, class: `circle minutes ${getMinutesActive(component) ? KupCardCSSClasses.VISIBLE : ''}`, ref: (el) => {
         setElement(component, el);
       } },
       buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm, component),
@@ -202,13 +202,13 @@ function setClockViewActive(component, hoursAct, minutesAct, secondsAct) {
   el.kupData.secondsActive = secondsAct;
 }
 function switchView(component, elId, elCircleId) {
-  getElement(component, KupCardBuiltinClockElements.HOURS).classList.remove(KupCardCSSClasses.VISIBLE);
-  getElement(component, KupCardBuiltinClockElements.HOURSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
-  getElement(component, KupCardBuiltinClockElements.MINUTES).classList.remove(KupCardCSSClasses.VISIBLE);
-  getElement(component, KupCardBuiltinClockElements.MINUTESCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltInClockElements.HOURS).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltInClockElements.HOURSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltInClockElements.MINUTES).classList.remove(KupCardCSSClasses.VISIBLE);
+  getElement(component, KupCardBuiltInClockElements.MINUTESCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
   if (isManageSeconds(component)) {
-    getElement(component, KupCardBuiltinClockElements.SECONDS).classList.remove(KupCardCSSClasses.VISIBLE);
-    getElement(component, KupCardBuiltinClockElements.SECONDSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
+    getElement(component, KupCardBuiltInClockElements.SECONDS).classList.remove(KupCardCSSClasses.VISIBLE);
+    getElement(component, KupCardBuiltInClockElements.SECONDSCIRCLE).classList.remove(KupCardCSSClasses.VISIBLE);
   }
   getElement(component, elId).classList.add(KupCardCSSClasses.VISIBLE);
   getElement(component, elCircleId).classList.add(KupCardCSSClasses.VISIBLE);
@@ -274,9 +274,9 @@ function buildClock(num, radius, offsetX, offsetY, className, add, separator, se
   return divsArray;
 }
 function setTimeFromClock(e, component) {
-  const hoursEl = getElement(component, KupCardBuiltinClockElements.HOURS);
-  const minutesEl = getElement(component, KupCardBuiltinClockElements.MINUTES);
-  const secondsEl = getElement(component, KupCardBuiltinClockElements.SECONDS);
+  const hoursEl = getElement(component, KupCardBuiltInClockElements.HOURS);
+  const minutesEl = getElement(component, KupCardBuiltInClockElements.MINUTES);
+  const secondsEl = getElement(component, KupCardBuiltInClockElements.SECONDS);
   let text = hoursEl.innerText + ':' + minutesEl.innerText;
   if (isManageSeconds(component)) {
     text += ':' + secondsEl.innerText;
@@ -284,30 +284,30 @@ function setTimeFromClock(e, component) {
   onKupClockItemClick(e, component, text);
 }
 function setClockTime(e, component) {
-  const hoursEl = getElement(component, KupCardBuiltinClockElements.HOURS);
-  const minutesEl = getElement(component, KupCardBuiltinClockElements.MINUTES);
-  const hoursCircleEl = getElement(component, KupCardBuiltinClockElements.HOURSCIRCLE);
-  const minutesCircleEl = getElement(component, KupCardBuiltinClockElements.MINUTESCIRCLE);
-  const secondsEl = getElement(component, KupCardBuiltinClockElements.SECONDS);
-  const secondsCircleEl = getElement(component, KupCardBuiltinClockElements.SECONDSCIRCLE);
+  const hoursEl = getElement(component, KupCardBuiltInClockElements.HOURS);
+  const minutesEl = getElement(component, KupCardBuiltInClockElements.MINUTES);
+  const hoursCircleEl = getElement(component, KupCardBuiltInClockElements.HOURSCIRCLE);
+  const minutesCircleEl = getElement(component, KupCardBuiltInClockElements.MINUTESCIRCLE);
+  const secondsEl = getElement(component, KupCardBuiltInClockElements.SECONDS);
+  const secondsCircleEl = getElement(component, KupCardBuiltInClockElements.SECONDSCIRCLE);
   let time = e.target.getAttribute('data-value');
   if (getHoursActive(component)) {
     hoursEl.innerText = time;
     hoursCircleEl.querySelector('.selected').classList.remove('selected');
     setClockViewActive(component, false, true, false);
-    switchView(component, KupCardBuiltinClockElements.MINUTES, KupCardBuiltinClockElements.MINUTESCIRCLE);
+    switchView(component, KupCardBuiltInClockElements.MINUTES, KupCardBuiltInClockElements.MINUTESCIRCLE);
   }
   else if (getMinutesActive(component)) {
     minutesEl.innerText = time;
     minutesCircleEl.querySelector('.selected').classList.remove('selected');
     if (isManageSeconds(component)) {
       setClockViewActive(component, false, false, true);
-      switchView(component, KupCardBuiltinClockElements.SECONDS, KupCardBuiltinClockElements.SECONDSCIRCLE);
+      switchView(component, KupCardBuiltInClockElements.SECONDS, KupCardBuiltInClockElements.SECONDSCIRCLE);
     }
     else {
       setTimeFromClock(e, component);
       setClockViewActive(component, true, false, false);
-      switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+      switchView(component, KupCardBuiltInClockElements.HOURS, KupCardBuiltInClockElements.HOURSCIRCLE);
     }
   }
   else {
@@ -315,7 +315,7 @@ function setClockTime(e, component) {
     secondsCircleEl.querySelector('.selected').classList.remove('selected');
     setTimeFromClock(e, component);
     setClockViewActive(component, true, false, false);
-    switchView(component, KupCardBuiltinClockElements.HOURS, KupCardBuiltinClockElements.HOURSCIRCLE);
+    switchView(component, KupCardBuiltInClockElements.HOURS, KupCardBuiltInClockElements.HOURSCIRCLE);
   }
   e.target.classList.add('selected');
 }

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

@@ -0,0 +1,167 @@
+import { h } from '@stencil/core';
+import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
+import { KupLanguageColumn, KupLanguageGeneric, KupLanguageTotals, } from '../../../managers/kup-language/kup-language-declarations';
+import { KupDataNewColumnTypes } from '../../../managers/kup-data/kup-data-declarations';
+const dom = document.documentElement;
+const premadeFormulas = [
+  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 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) })));
+    }
+  }
+  return [list, combobox, button, chipSet];
+}
+function prepareList(options) {
+  const listData = [];
+  if (options.enableMerge) {
+    listData.push({
+      text: dom.ketchup.language.translate(KupLanguageGeneric.MERGE),
+      value: KupLanguageGeneric.MERGE,
+      icon: 'library_add',
+    });
+  }
+  if (options.enableMove) {
+    listData.push({
+      text: dom.ketchup.language.translate(KupLanguageGeneric.MOVE),
+      value: KupLanguageGeneric.MOVE,
+      icon: 'swap_horiz',
+    });
+  }
+  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({
+      text: dom.ketchup.language.translate(KupLanguageTotals.AVERAGE),
+      value: KupLanguageTotals.AVERAGE,
+    }, {
+      text: dom.ketchup.language.translate(KupLanguageTotals.DIFFERENCE),
+      value: KupLanguageTotals.DIFFERENCE,
+    }, {
+      text: dom.ketchup.language.translate(KupLanguageTotals.PRODUCT),
+      value: KupLanguageTotals.PRODUCT,
+    }, {
+      text: dom.ketchup.language.translate(KupLanguageTotals.SUM),
+      value: KupLanguageTotals.SUM,
+    }, {
+      text: `[${options.starterColumn.name}] / [${options.receivingColumn.name}] * 100`,
+      value: `([${options.starterColumn.name}]/[${options.receivingColumn.name}])*100`,
+    }, {
+      text: `[${options.receivingColumn.name}] / [${options.starterColumn.name}] * 100`,
+      value: `([${options.receivingColumn.name}]/[${options.starterColumn.name}])*100`,
+    });
+  }
+  else {
+    comboListData.push({
+      text: dom.ketchup.language.translate(KupLanguageColumn.NO_FORMULA),
+      value: 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');
+}
+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);
+  });
+}
+function listClick(e, options) {
+  const value = e.detail.selected.value;
+  switch (value) {
+    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();
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import { FImage } from '../../../f-components/f-image/f-image';
 import { collapsibleBar } from '../kup-card-helper';
 import { KupCardCSSClasses } from '../kup-card-declarations';
-import { KupThemeColorValues } from '../../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
 const dom = document.documentElement;
 /**
  * 1st collapsible card layout, left bar and collapsible chips.

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

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { FImage } from '../../../f-components/f-image/f-image';
 import { compList, dialogHeader } from '../kup-card-helper';
-import { KupLanguageRow } from '../../../utils/kup-language/kup-language-declarations';
+import { KupLanguageRow } from '../../../managers/kup-language/kup-language-declarations';
 import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
 const dom = document.documentElement;
 /**
@@ -219,7 +219,7 @@ function nextButton(component) {
 }
 /**
  * Returns the index of the first visible numerical column.
- * @param {TableData}  data - Table data.
+ * @param {KupDataDataset} data - Table data.
  */
 function getVisibleColumn(data) {
   for (let index = 0; index < data.columns.length; index++) {

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

@@ -1,8 +1,7 @@
 import { h } from '@stencil/core';
 import { compList } from '../kup-card-helper';
-const dom = document.documentElement;
 /**
- * 1st free card layout, only slots.
+ * 1st free card layout, dropdown menu look.
  * @param {KupCard} component - Card component.
  * @returns {VNode} 1st standard layout virtual node.
  */
@@ -11,3 +10,13 @@ export function create1(component) {
   const slots = Array.prototype.slice.call(component.rootElement.children, 0);
   return (h("div", { class: `free-layout-${component.layoutNumber}` }, slots.length > 0 ? compList(slots, 'slot') : null));
 }
+/**
+ * 2nd free card layout, dropdown menu look with no padding.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create2(component) {
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (h("div", { class: `free-layout-${component.layoutNumber}` }, slots.length > 0 ? compList(slots, 'slot') : null));
+}

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

@@ -14,22 +14,22 @@ export var KupCardProps;
   KupCardProps["sizeY"] = "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
 })(KupCardProps || (KupCardProps = {}));
 /**
- * Element ids for kup-card clock builtin.
+ * Element ids for built-in clock.
  */
-export var KupCardBuiltinClockElements;
-(function (KupCardBuiltinClockElements) {
-  KupCardBuiltinClockElements["CLOCK"] = "clockEl";
-  KupCardBuiltinClockElements["HOURS"] = "hoursEl";
-  KupCardBuiltinClockElements["MINUTES"] = "minutesEl";
-  KupCardBuiltinClockElements["SECONDS"] = "secondsEl";
-  KupCardBuiltinClockElements["HOURSCIRCLE"] = "hoursCircleEl";
-  KupCardBuiltinClockElements["MINUTESCIRCLE"] = "minutesCircleEl";
-  KupCardBuiltinClockElements["SECONDSCIRCLE"] = "secondsCircleEl";
-})(KupCardBuiltinClockElements || (KupCardBuiltinClockElements = {}));
+export var KupCardBuiltInClockElements;
+(function (KupCardBuiltInClockElements) {
+  KupCardBuiltInClockElements["CLOCK"] = "clockEl";
+  KupCardBuiltInClockElements["HOURS"] = "hoursEl";
+  KupCardBuiltInClockElements["MINUTES"] = "minutesEl";
+  KupCardBuiltInClockElements["SECONDS"] = "secondsEl";
+  KupCardBuiltInClockElements["HOURSCIRCLE"] = "hoursCircleEl";
+  KupCardBuiltInClockElements["MINUTESCIRCLE"] = "minutesCircleEl";
+  KupCardBuiltInClockElements["SECONDSCIRCLE"] = "secondsCircleEl";
+})(KupCardBuiltInClockElements || (KupCardBuiltInClockElements = {}));
 /**
  * Layout families of the kup-card component.
  * @enum {string}
- * @property {string} BUILTIN - Cards belonging to this family will created automatically by library.
+ * @property {string} BUILT_IN - Cards belonging to this family will be created automatically by the library and will have premade behaviors.
  * @property {string} COLLAPSIBLE - Cards belonging to this family will display an area usable to expand the content of the card.
  * @property {string} DIALOG - Cards belonging to this family will be movable and usually closable.
  * @property {string} FREE - This family of card will only receive slots, usually already arranged from the outside style.
@@ -38,7 +38,7 @@ export var KupCardBuiltinClockElements;
  */
 export var KupCardFamily;
 (function (KupCardFamily) {
-  KupCardFamily["BUILTIN"] = "builtin";
+  KupCardFamily["BUILT_IN"] = "built-in";
   KupCardFamily["COLLAPSIBLE"] = "collapsible";
   KupCardFamily["DIALOG"] = "dialog";
   KupCardFamily["FREE"] = "free";
@@ -65,7 +65,7 @@ export var KupCardIds;
  */
 export var KupCardCSSClasses;
 (function (KupCardCSSClasses) {
-  KupCardCSSClasses["BUILTIN_CARD"] = "builtin-card";
+  KupCardCSSClasses["BUILT_IN_CARD"] = "built-in-card";
   KupCardCSSClasses["CARD_VIEW"] = "card-view";
   KupCardCSSClasses["CLICKABLE_LINK"] = "clickable-link";
   KupCardCSSClasses["COLLAPSIBLE_ACTIVE"] = "collapsible-active";

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

@@ -2,7 +2,7 @@ import { h } from '@stencil/core';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupCardCSSClasses, KupCardIds, KupCardSubEvents, } from './kup-card-declarations';
 import { KupColumnMenuIds } from '../../utils/kup-column-menu/kup-column-menu-declarations';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 /**
  * This function returns a list of components.
  * @param {GenericObject[]} compArray - Components' props.
@@ -144,9 +144,9 @@ export function layoutSpecificEvents(component, e) {
           else {
             chipData.push({
               icon: node.icon,
-              label: node.value,
+              value: node.value,
               obj: node.obj,
-              value: key,
+              id: key,
             });
           }
           apply.classList.add('visible');