@sme.up/ketchup 6.6.0 → 6.8.0

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

@@ -20,13 +20,9 @@ export function create1(component) {
       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)))));
+    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)));
+  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.
@@ -46,13 +42,12 @@ export function create2(component) {
       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)))));
+    props.cell.cssClass = props.cell.cssClass
+      ? props.cell.cssClass + ' c-right-aligned'
+      : 'c-right-aligned';
+    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("div", { class: "container" }, rows)));
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("table", null, rows)));
 }
 /**
  * 3rd box card layout, it can be used as a key-value row list.
@@ -72,13 +67,9 @@ export function create3(component) {
       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)))));
+    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)));
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, rows)));
 }
 /**
  * 4th box card layout, image and value.
@@ -123,10 +114,5 @@ export function create4(component) {
     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))))));
+  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-built-in.js

@@ -3,6 +3,7 @@ import { KupCardCSSClasses } from '../kup-card-declarations';
 import { prepareCalendar } from './kup-card-calendar';
 import { prepareClock } from './kup-card-clock';
 import { prepareColumnDropMenu } from './kup-card-column-drop-menu';
+import { prepareForm } from './kup-card-form';
 import { prepareNumeric } from './kup-card-numeric';
 /**
  * 1st built-in layout, calendar view.
@@ -39,10 +40,17 @@ export function create4(component) {
 }
 /**
  * 5th built-in layout, numeric picker.
- * This layout is rendered after the render cycle completes.
  * @param {KupCard} component - Card component.
- * @returns {VNode} 4th built-in layout virtual node.
+ * @returns {VNode} 5th built-in layout virtual node.
  */
 export function create5(component) {
   return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareNumeric(component)));
 }
+/**
+ * 6th built-in layout, form with submit button.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 6th built-in layout virtual node.
+ */
+export function create6(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareForm(component)));
+}

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-form.js

@@ -0,0 +1,11 @@
+import { h } from '@stencil/core';
+import { FButton } from '../../../f-components/f-button/f-button';
+import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
+const dom = document.documentElement;
+export function prepareForm(component) {
+  const options = component.data.options;
+  return [
+    h("kup-form", null),
+    h("div", { class: "button-wrapper" }, h(FButton, { icon: "clear", label: "Cancel", styling: FButtonStyling.FLAT }), h(FButton, { icon: "check", label: "Confirm" })),
+  ];
+}

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-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.