@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,64 +1,64 @@
-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 '../../../managers/kup-theme/kup-theme-declarations';
-const dom = document.documentElement;
-/**
- * 1st collapsible card layout, left bar and collapsible chips.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st collapsible layout virtual node.
- */
-export function create1(component) {
-  //Chips
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  //Bar color
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? 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()));
-}
-/**
- * 2nd collapsible card layout, colored text and icon in top right corner.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 2nd collapsible layout virtual node.
- */
-export function create2(component) {
-  //Chips
-  const chipArray = component.data['chip']
-    ? component.data['chip']
-    : [];
-  //Icon and text colors
-  const colorArray = component.data['color']
-    ? component.data['color']
-    : [];
-  //Right corner icon
-  const imageArray = component.data['image']
-    ? component.data['image']
-    : [];
-  //3 text slots
-  let textIndex = 0;
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Dynamic CSS variables
-  let CSSVariables = {
-    [`--color-0`]: colorArray[0]
-      ? 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()));
-}
+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 '../../../managers/kup-theme/kup-theme-declarations';
+const dom = document.documentElement;
+/**
+ * 1st collapsible card layout, left bar and collapsible chips.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st collapsible layout virtual node.
+ */
+export function create1(component) {
+  //Chips
+  const chipArray = component.data['chip']
+    ? component.data['chip']
+    : [];
+  //Bar color
+  const colorArray = component.data['color']
+    ? component.data['color']
+    : [];
+  //3 text slots
+  let textIndex = 0;
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  //Dynamic CSS variables
+  let CSSVariables = {
+    [`--color-0`]: colorArray[0]
+      ? 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()));
+}
+/**
+ * 2nd collapsible card layout, colored text and icon in top right corner.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 2nd collapsible layout virtual node.
+ */
+export function create2(component) {
+  //Chips
+  const chipArray = component.data['chip']
+    ? component.data['chip']
+    : [];
+  //Icon and text colors
+  const colorArray = component.data['color']
+    ? component.data['color']
+    : [];
+  //Right corner icon
+  const imageArray = component.data['image']
+    ? component.data['image']
+    : [];
+  //3 text slots
+  let textIndex = 0;
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  //Dynamic CSS variables
+  let CSSVariables = {
+    [`--color-0`]: colorArray[0]
+      ? 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()));
+}

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

@@ -1,217 +1,217 @@
-import { h } from '@stencil/core';
-import { FImage } from '../../../f-components/f-image/f-image';
-import { compList, dialogHeader } from '../kup-card-helper';
-import { KupLanguageRow } from '../../../managers/kup-language/kup-language-declarations';
-import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
-const dom = document.documentElement;
-/**
- * 1st dialog card layout, used to display information in string format.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create1(component) {
-  //Title, subtitle and description
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  const divs = [];
-  //Loop starts from 1: occurence [0] is the dialog's title
-  for (let index = 1; index < textArray.length; index++) {
-    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)));
-}
-/**
- * 2nd dialog card layout, used to display information in string format and features an highlighted row on top.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create2(component) {
-  //Title, subtitle and description
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  const divs = [];
-  //Loop starts from 3: occurence [0] is the dialog's title, [1] and [2] are the highlighted strings
-  for (let index = 3; index < textArray.length; index++) {
-    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)));
-}
-/**
- * 3rd dialog card layout, buttons and text lines, used for debug window.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create3(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Combobox list
-  const comboboxArray = component.data['combobox']
-    ? component.data['combobox']
-    : [];
-  //Slot list
-  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
-  //Textfield list
-  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)));
-}
-/**
- * 4th dialog card layout, used to display information with data table.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create4(component) {
-  //Action buttons
-  const buttonArray = component.data['button']
-    ? component.data['button']
-    : [];
-  //Dialog title
-  const textArray = component.data['text']
-    ? component.data['text']
-    : [];
-  //Datatable
-  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));
-}
-/**
- * 5th dialog card layout, buttons and text lines, used for debug window.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create5(component) {
-  //Slot list
-  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
-  //List
-  const listArray = component.data['list']
-    ? component.data['list']
-    : [];
-  //Dialog title
-  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)));
-}
-/**
- * 6th dialog card layout, a datatable or a spinner in its place.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create6(component) {
-  //Datatable
-  const datatableArray = component.data['datatable']
-    ? component.data['datatable']
-    : [];
-  //Dialog title
-  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 })))));
-}
-/**
- * 7th dialog card layout, a raw slot.
- * @param {KupCard} component - Card component.
- * @returns {VNode} 1st standard layout virtual node.
- */
-export function create7(component) {
-  //Dialog title
-  const textArray = component.data && component.data['text'] ? component.data['text'] : [];
-  //Slot list
-  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
-  return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), slots.length > 0 ? compList(slots, 'slot') : null));
-}
-/**
- * Invoked by 4th layout to switch to the previous record of the original data table.
- * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).
- * @param {KupCard} component - Card component.
- */
-function prevButton(component) {
-  const root = component.rootElement.shadowRoot;
-  let nextButton = null;
-  let prevButton = null;
-  let table = null;
-  let data = null;
-  if (root) {
-    table = root.querySelector('kup-data-table');
-    nextButton = root.querySelector('#' + KupCardIds.NEXT_ROW);
-    prevButton = root.querySelector('#' + KupCardIds.PREVIOUS_ROW);
-    if (table) {
-      data = table.data;
-    }
-  }
-  if (data) {
-    let visibleColumnIndex = getVisibleColumn(data);
-    if (visibleColumnIndex) {
-      const currColumn = data.columns[visibleColumnIndex];
-      const prevColumn = data.columns[visibleColumnIndex - 1];
-      const prevPrevColumn = data.columns[visibleColumnIndex - 2];
-      if (!isNaN(parseInt(prevColumn.name))) {
-        currColumn.visible = false;
-        prevColumn.visible = true;
-        if (isNaN(parseInt(prevPrevColumn.name))) {
-          prevButton.disabled = true;
-        }
-      }
-      nextButton.disabled = false;
-    }
-    table.refresh();
-  }
-}
-/**
- * Invoked by 4th layout to switch to the next record of the original data table.
- * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).
- * @param {KupCard} component - Card component.
- */
-function nextButton(component) {
-  const root = component.rootElement.shadowRoot;
-  let nextButton = null;
-  let prevButton = null;
-  let table = null;
-  let data = null;
-  if (root) {
-    table = root.querySelector('kup-data-table');
-    nextButton = root.querySelector('#' + KupCardIds.NEXT_ROW);
-    prevButton = root.querySelector('#' + KupCardIds.PREVIOUS_ROW);
-    if (table) {
-      data = table.data;
-    }
-  }
-  if (data) {
-    let visibleColumnIndex = getVisibleColumn(data);
-    if (visibleColumnIndex) {
-      const currColumn = data.columns[visibleColumnIndex];
-      const nextColumn = data.columns[visibleColumnIndex + 1];
-      const nextNextColumn = data.columns[visibleColumnIndex + 2];
-      if (nextColumn) {
-        currColumn.visible = false;
-        nextColumn.visible = true;
-        if (!nextNextColumn) {
-          nextButton.disabled = true;
-        }
-      }
-      prevButton.disabled = false;
-    }
-    table.refresh();
-  }
-}
-/**
- * Returns the index of the first visible numerical column.
- * @param {KupDataDataset} data - Table data.
- */
-function getVisibleColumn(data) {
-  for (let index = 0; index < data.columns.length; index++) {
-    const column = data.columns[index];
-    if (!isNaN(parseInt(column.name)) && column.visible) {
-      return index;
-    }
-  }
-  return null;
-}
+import { h } from '@stencil/core';
+import { FImage } from '../../../f-components/f-image/f-image';
+import { compList, dialogHeader } from '../kup-card-helper';
+import { KupLanguageRow } from '../../../managers/kup-language/kup-language-declarations';
+import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
+const dom = document.documentElement;
+/**
+ * 1st dialog card layout, used to display information in string format.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create1(component) {
+  //Title, subtitle and description
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  const divs = [];
+  //Loop starts from 1: occurence [0] is the dialog's title
+  for (let index = 1; index < textArray.length; index++) {
+    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)));
+}
+/**
+ * 2nd dialog card layout, used to display information in string format and features an highlighted row on top.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create2(component) {
+  //Title, subtitle and description
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  const divs = [];
+  //Loop starts from 3: occurence [0] is the dialog's title, [1] and [2] are the highlighted strings
+  for (let index = 3; index < textArray.length; index++) {
+    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)));
+}
+/**
+ * 3rd dialog card layout, buttons and text lines, used for debug window.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create3(component) {
+  //Action buttons
+  const buttonArray = component.data['button']
+    ? component.data['button']
+    : [];
+  //Combobox list
+  const comboboxArray = component.data['combobox']
+    ? component.data['combobox']
+    : [];
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  //Textfield list
+  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)));
+}
+/**
+ * 4th dialog card layout, used to display information with data table.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create4(component) {
+  //Action buttons
+  const buttonArray = component.data['button']
+    ? component.data['button']
+    : [];
+  //Dialog title
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  //Datatable
+  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));
+}
+/**
+ * 5th dialog card layout, buttons and text lines, used for debug window.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create5(component) {
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  //List
+  const listArray = component.data['list']
+    ? component.data['list']
+    : [];
+  //Dialog title
+  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)));
+}
+/**
+ * 6th dialog card layout, a datatable or a spinner in its place.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create6(component) {
+  //Datatable
+  const datatableArray = component.data['datatable']
+    ? component.data['datatable']
+    : [];
+  //Dialog title
+  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 })))));
+}
+/**
+ * 7th dialog card layout, a raw slot.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create7(component) {
+  //Dialog title
+  const textArray = component.data && component.data['text'] ? component.data['text'] : [];
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), slots.length > 0 ? compList(slots, 'slot') : null));
+}
+/**
+ * Invoked by 4th layout to switch to the previous record of the original data table.
+ * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).
+ * @param {KupCard} component - Card component.
+ */
+function prevButton(component) {
+  const root = component.rootElement.shadowRoot;
+  let nextButton = null;
+  let prevButton = null;
+  let table = null;
+  let data = null;
+  if (root) {
+    table = root.querySelector('kup-data-table');
+    nextButton = root.querySelector('#' + KupCardIds.NEXT_ROW);
+    prevButton = root.querySelector('#' + KupCardIds.PREVIOUS_ROW);
+    if (table) {
+      data = table.data;
+    }
+  }
+  if (data) {
+    let visibleColumnIndex = getVisibleColumn(data);
+    if (visibleColumnIndex) {
+      const currColumn = data.columns[visibleColumnIndex];
+      const prevColumn = data.columns[visibleColumnIndex - 1];
+      const prevPrevColumn = data.columns[visibleColumnIndex - 2];
+      if (!isNaN(parseInt(prevColumn.name))) {
+        currColumn.visible = false;
+        prevColumn.visible = true;
+        if (isNaN(parseInt(prevPrevColumn.name))) {
+          prevButton.disabled = true;
+        }
+      }
+      nextButton.disabled = false;
+    }
+    table.refresh();
+  }
+}
+/**
+ * Invoked by 4th layout to switch to the next record of the original data table.
+ * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).
+ * @param {KupCard} component - Card component.
+ */
+function nextButton(component) {
+  const root = component.rootElement.shadowRoot;
+  let nextButton = null;
+  let prevButton = null;
+  let table = null;
+  let data = null;
+  if (root) {
+    table = root.querySelector('kup-data-table');
+    nextButton = root.querySelector('#' + KupCardIds.NEXT_ROW);
+    prevButton = root.querySelector('#' + KupCardIds.PREVIOUS_ROW);
+    if (table) {
+      data = table.data;
+    }
+  }
+  if (data) {
+    let visibleColumnIndex = getVisibleColumn(data);
+    if (visibleColumnIndex) {
+      const currColumn = data.columns[visibleColumnIndex];
+      const nextColumn = data.columns[visibleColumnIndex + 1];
+      const nextNextColumn = data.columns[visibleColumnIndex + 2];
+      if (nextColumn) {
+        currColumn.visible = false;
+        nextColumn.visible = true;
+        if (!nextNextColumn) {
+          nextButton.disabled = true;
+        }
+      }
+      prevButton.disabled = false;
+    }
+    table.refresh();
+  }
+}
+/**
+ * Returns the index of the first visible numerical column.
+ * @param {KupDataDataset} data - Table data.
+ */
+function getVisibleColumn(data) {
+  for (let index = 0; index < data.columns.length; index++) {
+    const column = data.columns[index];
+    if (!isNaN(parseInt(column.name)) && column.visible) {
+      return index;
+    }
+  }
+  return null;
+}

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

@@ -1,22 +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));
-}
+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));
+}