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

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

@@ -0,0 +1,321 @@
+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 '../../../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;
+  el.kupData = {};
+  if (component.data && component.data.options) {
+    const opts = component.data.options;
+    const obj = opts.initialValue;
+    if (opts.initialValue) {
+      if (obj && obj.k)
+        el.kupData.value = obj.k;
+      else
+        el.kupData.value = opts.initialValue;
+    }
+    if (opts.manageSeconds != null)
+      el.kupData.manageSeconds = opts.manageSeconds;
+    if (opts.hoursActive != null)
+      el.kupData.hoursActive = opts.hoursActive;
+    if (opts.minutesActive != null)
+      el.kupData.minutesActive = opts.minutesActive;
+    if (opts.secondsActive != null)
+      el.kupData.secondsActive = opts.secondsActive;
+  }
+  else {
+    el.kupData.hoursActive = true;
+  }
+  return prepTimeArea(component);
+}
+function isManageSeconds(component) {
+  const el = component.rootElement;
+  if (el.kupData.manageSeconds != null)
+    return el.kupData.manageSeconds;
+  return false;
+}
+function getValue(component) {
+  const el = component.rootElement;
+  if (el.kupData.value)
+    return el.kupData.value;
+  return '';
+}
+function setValue(component, value) {
+  const el = component.rootElement;
+  el.kupData.value = value;
+}
+function getHoursActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.hoursActive != null)
+    return el.kupData.hoursActive;
+  return false;
+}
+function getMinutesActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.minutesActive != null)
+    return el.kupData.minutesActive;
+  return false;
+}
+function getSecondsActive(component) {
+  const el = component.rootElement;
+  if (el.kupData.secondsActive != null)
+    return el.kupData.secondsActive;
+  return false;
+}
+function setElement(component, elem) {
+  if (elem) {
+    const el = component.rootElement;
+    el.kupData[elem.id] = elem;
+  }
+}
+function getElement(component, elemId) {
+  return component.rootElement.shadowRoot.getElementById(elemId);
+}
+function prepTimeArea(component) {
+  return (h("div", { id: "clock-div", onBlur: (e) => {
+      if (!isRelatedTargetInThisComponent(e, component)) {
+        onKupBlur(component);
+      }
+    } }, createClock(component)));
+}
+function onKupClockItemClick(e, component, value) {
+  if (e != null) {
+    if (value == null) {
+      value = e.detail.selected.value;
+    }
+  }
+  setClockValueSelected(component, value);
+  component.onKupClick(component.rootElement.id, value);
+}
+function setClockValueSelected(component, newValue) {
+  if (newValue == null) {
+    newValue = getValue(component);
+  }
+  if (newValue == null) {
+    return;
+  }
+  setValue(component, newValue);
+}
+function isRelatedTargetInThisComponent(e, component) {
+  if (!e.relatedTarget) {
+    return false;
+  }
+  let id = e.relatedTarget.id;
+  if (id == null || id.trim() == '') {
+    return false;
+  }
+  if (id == getElement(component, KupCardBuiltInClockElements.CLOCK).id) {
+    return true;
+  }
+  let idConc = '#clock-div#confirm#';
+  return idConc.indexOf('#' + id + '#') >= 0;
+}
+function onKupBlur(component) {
+  component.onKupClick(component.rootElement.id, getValue(component));
+}
+function createClock(component) {
+  let selectedTime;
+  if (getValue(component)) {
+    selectedTime = dom.ketchup.dates.toDate(getValue(component), isManageSeconds(component)
+      ? KupDatesFormats.ISO_TIME
+      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
+  }
+  else {
+    selectedTime = new Date();
+  }
+  let hh = selectedTime.getHours().toString();
+  let mm = selectedTime.getMinutes().toString();
+  if (hh.length === 1) {
+    hh = '0' + hh;
+  }
+  if (mm.length === 1) {
+    mm = '0' + mm;
+  }
+  let ss = '';
+  if (isManageSeconds(component)) {
+    ss = selectedTime.getSeconds().toString();
+    if (ss.length === 1) {
+      ss = '0' + ss;
+    }
+  }
+  let seconds;
+  let time = [
+    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);
+      }, innerHTML: hh }),
+    ':',
+    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);
+      }, innerHTML: mm }),
+  ];
+  if (isManageSeconds(component)) {
+    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) => {
+        setElement(component, el);
+      }, onClick: () => {
+        setClockViewActive(component, false, false, true);
+        switchView(component, KupCardBuiltInClockElements.SECONDS, KupCardBuiltInClockElements.SECONDSCIRCLE);
+      }, innerHTML: ss }));
+  }
+  const confirmButtonProp = {
+    label: 'Ok',
+    styling: FButtonStyling.FLAT,
+    onClick: (e) => {
+      setTimeFromClock(e, component);
+    },
+  };
+  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) => {
+        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) => {
+        setElement(component, el);
+      } },
+      buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm, component),
+      h("div", { class: "mid" })),
+    seconds,
+    h("div", { class: "actions" },
+      h(FButton, Object.assign({}, confirmButtonProp)))));
+}
+function setClockViewActive(component, hoursAct, minutesAct, secondsAct) {
+  const el = component.rootElement;
+  el.kupData.hoursActive = hoursAct;
+  el.kupData.minutesActive = minutesAct;
+  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);
+  if (isManageSeconds(component)) {
+    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);
+}
+function buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue, component) {
+  let x, y;
+  const divsArray = [];
+  for (let n = 0; n < num; n++) {
+    x = radius * Math.cos((n / num) * 2 * Math.PI);
+    y = radius * Math.sin((n / num) * 2 * Math.PI);
+    let text;
+    let dataValue = {};
+    let style = {};
+    if (separator == 1) {
+      if (n + 3 > 12) {
+        text = n + 3 - 12 + add + '';
+      }
+      else {
+        let calc = n + 3 + add;
+        if (calc !== 24) {
+          text = n + 3 + add + '';
+        }
+        else {
+          text = '00';
+        }
+      }
+      dataValue['data-value'] = text;
+    }
+    else {
+      if (n % separator == 0) {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = n + 15 - 60 + add + '';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = n + 15 + add + '';
+        }
+      }
+      else {
+        if (n + 15 >= 60) {
+          dataValue['data-value'] = n + 15 - 60 + '';
+          text = '⋅';
+        }
+        else {
+          dataValue['data-value'] = n + 15 + '';
+          text = '\u00B7';
+        }
+      }
+    }
+    style['left'] = x + offsetX + 'px';
+    style['top'] = y + offsetY + 'px';
+    if (dataValue['data-value'].length === 1) {
+      dataValue['data-value'] = '0' + dataValue['data-value'];
+    }
+    let elClass = className;
+    if (dataValue['data-value'] === selectedValue) {
+      elClass += ' selected';
+    }
+    let div = (h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => setClockTime(e, component) }), text));
+    divsArray.push(div);
+  }
+  return divsArray;
+}
+function setTimeFromClock(e, component) {
+  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;
+  }
+  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);
+  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);
+  }
+  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);
+    }
+    else {
+      setTimeFromClock(e, component);
+      setClockViewActive(component, true, false, false);
+      switchView(component, KupCardBuiltInClockElements.HOURS, KupCardBuiltInClockElements.HOURSCIRCLE);
+    }
+  }
+  else {
+    secondsEl.innerText = time;
+    secondsCircleEl.querySelector('.selected').classList.remove('selected');
+    setTimeFromClock(e, component);
+    setClockViewActive(component, true, false, false);
+    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

@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+import { compList } from '../kup-card-helper';
+/**
+ * 1st free card layout, dropdown menu look.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create1(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));
+}
+/**
+ * 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

@@ -13,17 +13,35 @@ export var KupCardProps;
   KupCardProps["sizeX"] = "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).";
   KupCardProps["sizeY"] = "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).";
 })(KupCardProps || (KupCardProps = {}));
+/**
+ * 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 = {}));
 /**
  * Layout families of the kup-card component.
  * @enum {string}
+ * @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.
  * @property {string} SCALABLE - Content will fit its container, resizing itself automatically.
  * @property {string} STANDARD - Stndard layouts.
  */
 export var KupCardFamily;
 (function (KupCardFamily) {
+  KupCardFamily["BUILT_IN"] = "built-in";
   KupCardFamily["COLLAPSIBLE"] = "collapsible";
   KupCardFamily["DIALOG"] = "dialog";
+  KupCardFamily["FREE"] = "free";
   KupCardFamily["SCALABLE"] = "scalable";
   KupCardFamily["STANDARD"] = "standard";
 })(KupCardFamily || (KupCardFamily = {}));
@@ -47,6 +65,7 @@ export var KupCardIds;
  */
 export var KupCardCSSClasses;
 (function (KupCardCSSClasses) {
+  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');