@sme.up/ketchup 6.5.0 → 6.7.0

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

@@ -0,0 +1,115 @@
+import { h } from '@stencil/core';
+import { FCell } from '../../../f-components/f-cell/f-cell';
+import { FCellPadding, FCellShapes, } from '../../../f-components/f-cell/f-cell-declarations';
+const dom = document.documentElement;
+/**
+ * 1st box card layout, it can be used as a key-value grid list.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st box layout virtual node.
+ */
+export function create1(component) {
+  const rows = [];
+  for (let index = 0; index < component.data.cell.length; index++) {
+    const cell = component.data.cell[index];
+    const column = component.data.columns[index];
+    const props = {
+      cell: cell,
+      column: column,
+      component: component,
+      density: FCellPadding.NONE,
+      renderKup: true,
+      row: { cells: { [column.name]: cell } },
+    };
+    rows.push(h("tr", null, h("td", { class: "label" }, column.title), h("td", { class: "value" }, h(FCell, Object.assign({}, props)))));
+  }
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("table", null, rows)));
+}
+/**
+ * 2nd box card layout, it can be used as a key-value grid list with text occupying the left/right edges of the box.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 2nd box layout virtual node.
+ */
+export function create2(component) {
+  const rows = [];
+  for (let index = 0; index < component.data.cell.length; index++) {
+    const cell = component.data.cell[index];
+    const column = component.data.columns[index];
+    const props = {
+      cell: cell,
+      column: column,
+      component: component,
+      density: FCellPadding.NONE,
+      renderKup: true,
+      row: { cells: { [column.name]: cell } },
+    };
+    rows.push(h("div", { class: "flex-container" }, h("div", { class: "label" }, column.title), h("div", { class: "value" }, h(FCell, Object.assign({}, props)))));
+  }
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, rows)));
+}
+/**
+ * 3rd box card layout, it can be used as a key-value row list.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 3rd box layout virtual node.
+ */
+export function create3(component) {
+  const rows = [];
+  for (let index = 0; index < component.data.cell.length; index++) {
+    const cell = component.data.cell[index];
+    const column = component.data.columns[index];
+    const props = {
+      cell: cell,
+      column: column,
+      component: component,
+      density: FCellPadding.NONE,
+      renderKup: true,
+      row: { cells: { [column.name]: cell } },
+    };
+    rows.push(h("div", { class: "flex-container" }, h("div", { class: "label" }, column.title), h("div", { class: "value" }, h(FCell, Object.assign({}, props)))));
+  }
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, rows)));
+}
+/**
+ * 4th box card layout, image and value.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 4th box layout virtual node.
+ */
+export function create4(component) {
+  const cells = component.data.cell;
+  const columns = component.data.columns;
+  let image = null;
+  let value = null;
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    if ((!image &&
+      (dom.ketchup.objects.isImage(cell.obj) ||
+        dom.ketchup.objects.isIcon(cell.obj))) ||
+      cell.shape === FCellShapes.IMAGE) {
+      image = index;
+      if (!cell.data) {
+        cell.data = { resource: cell.value };
+      }
+    }
+    if (!value && !dom.ketchup.objects.isImage(cell.obj)) {
+      value = index;
+    }
+  }
+  const imageProps = {
+    cell: cells[image],
+    column: columns[image],
+    component: component,
+    density: FCellPadding.NONE,
+    renderKup: true,
+    row: { cells: { [columns[image].name]: cells[image] } },
+    wrapperClass: 'c-centered',
+  };
+  const valueProps = {
+    cell: cells[value],
+    column: columns[value],
+    component: component,
+    density: FCellPadding.NONE,
+    renderKup: true,
+    row: { cells: { [columns[value].name]: cells[value] } },
+    wrapperClass: 'c-centered',
+  };
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, h("div", { class: "image" }, h(FCell, Object.assign({}, imageProps))), h("div", { class: "value" }, h(FCell, Object.assign({}, valueProps))))));
+}

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

@@ -70,13 +70,7 @@ export function prepareCalendar(component) {
     id: 'change-view-button',
   };
   //text-transform:capitalize
-  return (h("div", { id: component.rootElement.id + '_calendar' },
-    h("div", { class: "section-1" },
-      h("div", { class: "sub-1 nav" },
-        prevButtonComp,
-        h(FButton, Object.assign({}, changeViewButtonProp)),
-        nextButtonComp)),
-    h("div", { class: "section-2" }, createCalendar(component))));
+  return (h("div", { id: component.rootElement.id + '_calendar' }, h("div", { class: "section-1" }, h("div", { class: "sub-1 nav" }, prevButtonComp, h(FButton, Object.assign({}, changeViewButtonProp)), nextButtonComp)), h("div", { class: "section-2" }, createCalendar(component))));
 }
 function setValue(component, value) {
   const el = component.rootElement;
@@ -159,8 +153,7 @@ function createDaysCalendar(component) {
   const thead = [];
   const tbody = [];
   for (let index = 0; index < days.length; index++) {
-    thead.push(h("th", null,
-      h("span", { class: "item-text" }, days[index])));
+    thead.push(h("th", null, h("span", { class: "item-text" }, days[index])));
   }
   const firstMonthDay = new Date(selectedYear, selectedMonth, 1);
   const lastMonthDay = new Date(selectedYear, selectedMonth + 1, 0);
@@ -197,10 +190,9 @@ function createDaysCalendar(component) {
           selectedYear === selectedDate.getFullYear())) {
         dayClass += ' selected';
       }
-      row.push(h("td", { class: dayClass },
-        h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            onCalendarItemClick(component, dataIndex['data-index']);
-          } }), dayCount)));
+      row.push(h("td", { class: dayClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarItemClick(component, dataIndex['data-index']);
+        } }), dayCount)));
       dayCount++;
       if (dayCount > lastMonthDay.getDate()) {
         break;
@@ -212,9 +204,7 @@ function createDaysCalendar(component) {
     }
     daysForRowAdded = 0;
   }
-  return (h("table", { class: "calendar" },
-    h("thead", null, thead),
-    h("tbody", null, tbody)));
+  return (h("table", { class: "calendar" }, h("thead", null, thead), h("tbody", null, tbody)));
 }
 function createMonthsCalendar(component) {
   const months = getMonthsAsStringByLocale(DateTimeFormatOptionsMonth.SHORT);
@@ -239,10 +229,9 @@ function createMonthsCalendar(component) {
       if (monthCount === selectedMonth) {
         monthClass += ' selected';
       }
-      row.push(h("td", { class: monthClass },
-        h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            onCalendarMonthYearItemClick(component, dataIndex['data-index']);
-          } }), months[monthCount])));
+      row.push(h("td", { class: monthClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+        } }), months[monthCount])));
       monthCount++;
     }
     if (row.length > 0) {
@@ -250,8 +239,7 @@ function createMonthsCalendar(component) {
       row = [];
     }
   }
-  return (h("table", { class: "calendar" },
-    h("tbody", null, tbody)));
+  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
 }
 function createYearsCalendar(component) {
   let selectedDay = getDay(component);
@@ -278,10 +266,9 @@ function createYearsCalendar(component) {
       if (yearCount === selectedYear) {
         yearClass += ' selected';
       }
-      row.push(h("td", { class: yearClass },
-        h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
-            onCalendarMonthYearItemClick(component, dataIndex['data-index']);
-          } }), yearCount)));
+      row.push(h("td", { class: yearClass }, h("span", Object.assign({}, dataIndex, { class: "item-number", onClick: () => {
+          onCalendarMonthYearItemClick(component, dataIndex['data-index']);
+        } }), yearCount)));
       yearCount++;
     }
     if (row.length > 0) {
@@ -289,8 +276,7 @@ function createYearsCalendar(component) {
       row = [];
     }
   }
-  return (h("table", { class: "calendar" },
-    h("tbody", null, tbody)));
+  return (h("table", { class: "calendar" }, h("tbody", null, tbody)));
 }
 function getDaysOfWeekAsStringByLocale(firstDayIndex) {
   const thisWeekDays = thisWeek(firstDayIndex);

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

@@ -159,9 +159,7 @@ function createClock(component) {
   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" })));
+      } }, 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: () => {
@@ -178,22 +176,11 @@ function createClock(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)))));
+    } }, 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;

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

@@ -34,8 +34,7 @@ export function prepareColumnDropMenu(component) {
     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) })));
+      chipSet = (h("div", { class: "sub-chip" }, h("kup-chip", { data: chipData, "onKup-chip-click": (e) => typeColumn(e, component) })));
     }
   }
   return [list, combobox, button, chipSet];

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

@@ -40,50 +40,15 @@ export function prepareNumeric(component) {
     onClick: () => saveValue(component),
   };
   const decChar = getDecimalChar();
-  return (h("table", null,
-    h("tr", null,
-      h("td", { colSpan: 3 },
-        h("div", { class: "value" }, el.kupData.localeValue))),
-    h("tr", null,
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))),
-    h("tr", null,
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))),
-    h("tr", null,
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))),
-    h("tr", null,
-      h("td", null, negative
-        ? [
-          h("div", { class: "number", onClick: () => setSign(component) }, "-"),
-        ]
-        : []),
-      h("td", null,
-        h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")),
-      h("td", null, decimals
-        ? [
-          h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
-        ]
-        : [])),
-    h("tr", null,
-      h("td", null),
-      h("td", null,
-        h(FButton, Object.assign({}, clearButtonProp))),
-      h("td", null,
-        h(FButton, Object.assign({}, saveButtonProp))))));
+  return (h("table", null, h("tr", null, h("td", { colSpan: 3 }, h("div", { class: "value" }, el.kupData.localeValue))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))), h("tr", null, h("td", null, h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))), h("tr", null, h("td", null, negative
+    ? [
+      h("div", { class: "number", onClick: () => setSign(component) }, "-"),
+    ]
+    : []), h("td", null, h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")), h("td", null, decimals
+    ? [
+      h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
+    ]
+    : [])), h("tr", null, h("td", null), h("td", null, h(FButton, Object.assign({}, clearButtonProp))), h("td", null, h(FButton, Object.assign({}, saveButtonProp))))));
 }
 function getOptions(component) {
   if (component.data.options)

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

@@ -29,16 +29,7 @@ export function create1(component) {
       ? colorArray[0]
       : `var(${KupThemeColorValues.PRIMARY})`,
   };
-  return (h("div", { class: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables },
-    h("div", { class: "section-1" }),
-    h("div", { class: "section-2" },
-      h("div", { class: "sub-1" },
-        h("div", { class: "text left" }, textArray[textIndex] ? textArray[textIndex] : ''),
-        h("div", { class: "text right" }, textArray[++textIndex] ? textArray[textIndex] : '')),
-      h("div", { class: "sub-2" },
-        h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')),
-      h("div", { class: `sub-3 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)),
-    collapsibleBar()));
+  return (h("div", { class: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, h("div", { class: "section-1" }), h("div", { class: "section-2" }, h("div", { class: "sub-1" }, h("div", { class: "text left" }, textArray[textIndex] ? textArray[textIndex] : ''), h("div", { class: "text right" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: `sub-3 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
 }
 /**
  * 2nd collapsible card layout, colored text and icon in top right corner.
@@ -69,15 +60,5 @@ export function create2(component) {
       ? colorArray[0]
       : `var(${KupThemeColorValues.PRIMARY})`,
   };
-  return (h("div", { class: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables },
-    h("div", { class: "section-1" },
-      h("div", { class: "sub-1" },
-        h("div", { class: "text" }, textArray[textIndex] ? textArray[textIndex] : '')),
-      h("div", { class: "sub-2" },
-        h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')),
-      h("div", { class: "sub-3" },
-        h("div", { class: "image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "24px", sizeY: "24px" }))) : null),
-        h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')),
-      h("div", { class: `sub-4 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)),
-    collapsibleBar()));
+  return (h("div", { class: `collapsible-layout-${component.layoutNumber} ${KupCardCSSClasses.COLLAPSIBLE_CARD}`, style: CSSVariables }, h("div", { class: "section-1" }, h("div", { class: "sub-1" }, h("div", { class: "text" }, textArray[textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-2" }, h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: "sub-3" }, h("div", { class: "image" }, imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "24px", sizeY: "24px" }))) : null), h("div", { class: "text" }, textArray[++textIndex] ? textArray[textIndex] : '')), h("div", { class: `sub-4 ${KupCardCSSClasses.COLLAPSIBLE_WRAPPER}` }, chipArray[0] ? (h("kup-chip", Object.assign({ class: KupCardCSSClasses.COLLAPSIBLE_ELEMENT, id: "chip1" }, chipArray[0]))) : null)), collapsibleBar()));
 }

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

@@ -20,9 +20,7 @@ export function create1(component) {
     const isEven = index % 2 == 0;
     divs.push(h("span", { class: `text ${!isEven ? 'label' : ''}` }, textArray[index]));
   }
-  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` },
-    dialogHeader(textArray[0]),
-    h("div", { class: "section-1" }, divs)));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` }, dialogHeader(textArray[0]), h("div", { class: "section-1" }, divs)));
 }
 /**
  * 2nd dialog card layout, used to display information in string format and features an highlighted row on top.
@@ -40,12 +38,7 @@ export function create2(component) {
     const isEven = index % 2 == 0;
     divs.push(h("span", { class: `text ${!isEven ? 'label' : ''}` }, textArray[index]));
   }
-  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` },
-    textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''),
-    textArray[1] && textArray[2] ? (h("div", { class: "section-1" },
-      h("div", { class: "text label" }, textArray[1]),
-      h("div", { class: "text " }, textArray[2]))) : null,
-    h("div", { class: "section-2" }, divs)));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), textArray[1] && textArray[2] ? (h("div", { class: "section-1" }, h("div", { class: "text label" }, textArray[1]), h("div", { class: "text " }, textArray[2]))) : null, h("div", { class: "section-2" }, divs)));
 }
 /**
  * 3rd dialog card layout, buttons and text lines, used for debug window.
@@ -67,14 +60,7 @@ export function create3(component) {
   const textfieldArray = component.data['textfield']
     ? component.data['textfield']
     : [];
-  return (h("div", { class: `dialog-layout-${component.layoutNumber} ${KupCardCSSClasses.DIALOG_UNRESIZABLE}` },
-    h("div", null,
-      buttonArray.length > 0 || textfieldArray.length > 0 ? (h("div", { class: "section-1" },
-        h(FImage, { id: KupCardIds.DRAG_HANDLE, resource: "drag_handle", sizeX: "32px", sizeY: "32px" }),
-        compList(buttonArray, 'button'),
-        compList(textfieldArray, 'textfield'),
-        compList(comboboxArray, 'combobox'))) : null,
-      slots.length > 0 ? (h("div", { class: "section-2" }, compList(slots, 'slot'))) : null)));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber} ${KupCardCSSClasses.DIALOG_UNRESIZABLE}` }, h("div", null, buttonArray.length > 0 || textfieldArray.length > 0 ? (h("div", { class: "section-1" }, h(FImage, { id: KupCardIds.DRAG_HANDLE, resource: "drag_handle", sizeX: "32px", sizeY: "32px" }), compList(buttonArray, 'button'), compList(textfieldArray, 'textfield'), compList(comboboxArray, 'combobox'))) : null, slots.length > 0 ? (h("div", { class: "section-2" }, compList(slots, 'slot'))) : null)));
 }
 /**
  * 4th dialog card layout, used to display information with data table.
@@ -94,13 +80,7 @@ export function create4(component) {
   const datatableArray = component.data['datatable']
     ? component.data['datatable']
     : [];
-  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` },
-    textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''),
-    datatableArray[0] && buttonArray[0] && buttonArray[1] ? (h("div", { class: "section-1" },
-      h("kup-button", Object.assign({}, buttonArray[0], { id: KupCardIds.PREVIOUS_ROW, "onkup-button-click": () => prevButton(component), title: dom.ketchup.language.translate(KupLanguageRow.PREVIOUS) })),
-      h("kup-button", Object.assign({}, buttonArray[1], { id: KupCardIds.NEXT_ROW, "onkup-button-click": () => nextButton(component), title: dom.ketchup.language.translate(KupLanguageRow.NEXT) })))) : null,
-    datatableArray[0] ? (h("div", { class: "section-2" },
-      h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0])))) : null));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber} dialog-element` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), datatableArray[0] && buttonArray[0] && buttonArray[1] ? (h("div", { class: "section-1" }, h("kup-button", Object.assign({}, buttonArray[0], { id: KupCardIds.PREVIOUS_ROW, "onkup-button-click": () => prevButton(component), title: dom.ketchup.language.translate(KupLanguageRow.PREVIOUS) })), h("kup-button", Object.assign({}, buttonArray[1], { id: KupCardIds.NEXT_ROW, "onkup-button-click": () => nextButton(component), title: dom.ketchup.language.translate(KupLanguageRow.NEXT) })))) : null, datatableArray[0] ? (h("div", { class: "section-2" }, h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0])))) : null));
 }
 /**
  * 5th dialog card layout, buttons and text lines, used for debug window.
@@ -118,12 +98,7 @@ export function create5(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  return (h("div", { class: `dialog-layout-${component.layoutNumber} ${KupCardCSSClasses.DIALOG_UNRESIZABLE}` },
-    textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''),
-    h("div", null,
-      slots.length > 0 ? (h("div", { class: "section-1" }, compList(slots, 'slot'))) : null,
-      listArray[0] ? (h("div", { class: "section-2" },
-        h("kup-list", Object.assign({ id: "list1" }, listArray[0])))) : null)));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber} ${KupCardCSSClasses.DIALOG_UNRESIZABLE}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), h("div", null, slots.length > 0 ? (h("div", { class: "section-1" }, compList(slots, 'slot'))) : null, listArray[0] ? (h("div", { class: "section-2" }, h("kup-list", Object.assign({ id: "list1" }, listArray[0])))) : null)));
 }
 /**
  * 6th dialog card layout, a datatable or a spinner in its place.
@@ -139,9 +114,7 @@ export function create6(component) {
   const textArray = component.data['text']
     ? component.data['text']
     : [];
-  return (h("div", { class: `dialog-layout-${component.layoutNumber}` },
-    textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''),
-    h("div", { class: "section-1" }, datatableArray.length > 0 ? (h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0]))) : (h("kup-spinner", { active: true, dimensions: "7px", layout: 14 })))));
+  return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), h("div", { class: "section-1" }, datatableArray.length > 0 ? (h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0]))) : (h("kup-spinner", { active: true, dimensions: "7px", layout: 14 })))));
 }
 /**
  * Invoked by 4th layout to switch to the previous record of the original data table.

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

@@ -29,6 +29,7 @@ export var KupCardBuiltInClockElements;
 /**
  * Layout families of the kup-card component.
  * @enum {string}
+ * @property {string} BOX - Layouts tailored for kup-box.
  * @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.
@@ -38,6 +39,7 @@ export var KupCardBuiltInClockElements;
  */
 export var KupCardFamily;
 (function (KupCardFamily) {
+  KupCardFamily["BOX"] = "box";
   KupCardFamily["BUILT_IN"] = "built-in";
   KupCardFamily["COLLAPSIBLE"] = "collapsible";
   KupCardFamily["DIALOG"] = "dialog";

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

@@ -36,9 +36,7 @@ export function compList(compArray, compType) {
         list.push(h("slot", null));
         break;
       case 'text':
-        list.push(h("div", { class: "text" },
-          " ",
-          compArray[index]));
+        list.push(h("div", { class: "text" }, " ", compArray[index]));
         break;
       case 'textfield':
         list.push(h("kup-text-field", Object.assign({}, compArray[index])));
@@ -56,17 +54,14 @@ export function compList(compArray, compType) {
  * @returns {VNode} Virtual node of the dialog's header bar.
  */
 export function dialogHeader(title) {
-  return (h("div", { id: KupCardIds.DRAG_HANDLE, class: KupCardCSSClasses.HEADER_BAR },
-    title ? (h("div", { class: KupCardCSSClasses.DIALOG_TITLE }, title)) : null,
-    h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, sizeX: "1.25em", sizeY: "100%", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
+  return (h("div", { id: KupCardIds.DRAG_HANDLE, class: KupCardCSSClasses.HEADER_BAR }, title ? (h("div", { class: KupCardCSSClasses.DIALOG_TITLE }, title)) : null, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, sizeX: "1.25em", sizeY: "100%", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
 }
 /**
  * Creates the bar used to expand/collapse the card.
  * @returns {VNode} Expansion bar virtual node.
  */
 export function collapsibleBar() {
-  return (h("div", { class: "collapsible-trigger" },
-    h("kup-button", { id: KupCardIds.EXPAND_ACTION, toggable: true, iconOff: "keyboard_arrow_down", icon: "keyboard_arrow_up" })));
+  return (h("div", { class: "collapsible-trigger" }, h("kup-button", { id: KupCardIds.EXPAND_ACTION, toggable: true, iconOff: "keyboard_arrow_down", icon: "keyboard_arrow_up" })));
 }
 /**
  * Handles layout-specific actions when an event occurs.