@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -10,43 +10,43 @@ import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarat
  * @returns {JSX.Element[]} List of components.
  */
 export function compList(compArray, compType) {
-  let list = [];
-  for (let index = 0; index < compArray.length; index++) {
-    if (typeof compArray[0] !== 'string' &&
-      !compArray[index].id) {
-      compArray[index]['id'] = compType + index;
-    }
-    switch (compType) {
-      case 'autocomplete':
-        list.push(h("kup-autocomplete", Object.assign({}, compArray[index])));
-        break;
-      case 'button':
-        list.push(h("kup-button", Object.assign({}, compArray[index])));
-        break;
-      case 'checkbox':
-        list.push(h("kup-checkbox", Object.assign({}, compArray[index])));
-        break;
-      case 'combobox':
-        list.push(h("kup-combobox", Object.assign({}, compArray[index])));
-        break;
-      case 'datepicker':
-        list.push(h("kup-date-picker", Object.assign({}, compArray[index])));
-        break;
-      case 'slot':
-        list.push(h("slot", null));
-        break;
-      case 'text':
-        list.push(h("div", { class: "text" }, " ", compArray[index]));
-        break;
-      case 'textfield':
-        list.push(h("kup-text-field", Object.assign({}, compArray[index])));
-        break;
-      case 'timepicker':
-        list.push(h("kup-time-picker", Object.assign({}, compArray[index])));
-        break;
+    let list = [];
+    for (let index = 0; index < compArray.length; index++) {
+        if (typeof compArray[0] !== 'string' &&
+            !compArray[index].id) {
+            compArray[index]['id'] = compType + index;
+        }
+        switch (compType) {
+            case 'autocomplete':
+                list.push(h("kup-autocomplete", Object.assign({}, compArray[index])));
+                break;
+            case 'button':
+                list.push(h("kup-button", Object.assign({}, compArray[index])));
+                break;
+            case 'checkbox':
+                list.push(h("kup-checkbox", Object.assign({}, compArray[index])));
+                break;
+            case 'combobox':
+                list.push(h("kup-combobox", Object.assign({}, compArray[index])));
+                break;
+            case 'datepicker':
+                list.push(h("kup-date-picker", Object.assign({}, compArray[index])));
+                break;
+            case 'slot':
+                list.push(h("slot", null));
+                break;
+            case 'text':
+                list.push(h("div", { class: "text" }, " ", compArray[index]));
+                break;
+            case 'textfield':
+                list.push(h("kup-text-field", Object.assign({}, compArray[index])));
+                break;
+            case 'timepicker':
+                list.push(h("kup-time-picker", Object.assign({}, compArray[index])));
+                break;
+        }
     }
-  }
-  return list;
+    return list;
 }
 /**
  * Called by the layouts method to return the header bar of the dialog.
@@ -54,14 +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.
@@ -69,128 +69,128 @@ export function collapsibleBar() {
  * @param {CustomEvent} e - Event triggered by a sub-component.
  */
 export function layoutSpecificEvents(component, e) {
-  const root = component.rootElement.shadowRoot;
-  /*-------------------------------------------------*/
-  /*      C o l l a p s i b l e   L a y o u t s      */
-  /*-------------------------------------------------*/
-  if (e.type === KupCardSubEvents.BUTTON_CLICK &&
-    e.detail.id === KupCardIds.EXPAND_ACTION) {
-    const collapsibleCard = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_CARD);
-    if (!collapsibleCard.classList.contains('.' + KupCardCSSClasses.EXPANDED)) {
-      collapsibleCard.classList.add('.' + KupCardCSSClasses.EXPANDED);
-      component.oldSizeY = component.sizeY;
-      component.sizeY = 'auto';
+    const root = component.rootElement.shadowRoot;
+    /*-------------------------------------------------*/
+    /*      C o l l a p s i b l e   L a y o u t s      */
+    /*-------------------------------------------------*/
+    if (e.type === KupCardSubEvents.BUTTON_CLICK &&
+        e.detail.id === KupCardIds.EXPAND_ACTION) {
+        const collapsibleCard = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_CARD);
+        if (!collapsibleCard.classList.contains('.' + KupCardCSSClasses.EXPANDED)) {
+            collapsibleCard.classList.add('.' + KupCardCSSClasses.EXPANDED);
+            component.oldSizeY = component.sizeY;
+            component.sizeY = 'auto';
+        }
+        else if (component.oldSizeY) {
+            collapsibleCard.classList.remove('.' + KupCardCSSClasses.EXPANDED);
+            component.sizeY = component.oldSizeY;
+        }
+        return;
+    }
+    /*-------------------------------------------------*/
+    /*      1 4 t h   S t a n d a r d  L a y o u t     */
+    /*-------------------------------------------------*/
+    // Tab change: when a tab is clicked, the corresponding view will be activated while the others will become hidden.
+    if (root &&
+        e.type === KupCardSubEvents.TABBAR_CLICK &&
+        e.detail.id === KupCardIds.VIEW_SELECTOR) {
+        const views = root.querySelectorAll('.' + KupCardCSSClasses.CARD_VIEW);
+        for (let index = 0; index < views.length; index++) {
+            const view = views[index];
+            if (view.classList.contains(KupCardCSSClasses.VIEW_PREFIX + (e.detail.index + 1))) {
+                view.classList.add(KupCardCSSClasses.VISIBLE);
+            }
+            else {
+                view.classList.remove(KupCardCSSClasses.VISIBLE);
+            }
+        }
+    }
+    // Chip deleted: when a chip is deleted, the apply button must appear.
+    if (root &&
+        e.type === KupCardSubEvents.CHIP_ICONCLICK &&
+        e.detail.id === KupCardIds.COLUMNS_LIST) {
+        const apply = root.querySelector('#' + KupColumnMenuIds.BUTTON_APPLY);
+        apply.classList.add('visible');
+    }
+    // Chip creation: upon clicking on the tree, the chip list will updated by adding or removing an entry.
+    if (root &&
+        e.type === KupCardSubEvents.TREE_NODESELECTED &&
+        e.detail.id === KupCardIds.EXTRA_COLUMNS) {
+        if (e.detail.treeNode) {
+            const apply = root.querySelector('#' + KupColumnMenuIds.BUTTON_APPLY);
+            const chip = root.querySelector('#' + KupCardIds.COLUMNS_LIST);
+            const node = e.detail.treeNode;
+            const obj = e.detail.treeNode.obj;
+            if (obj &&
+                obj.t !== '' &&
+                (obj.t !== '**' || (obj.t === '**' && !obj.k))) {
+                const chipData = chip && chip.data ? chip.data : null;
+                // This should be handled server-side, data should arrive correctly.
+                // Right now the only way to bind chips with tree nodes is a consistent value - which is the child column's name.
+                // Hence, the algorithm below.
+                const key = component.rootElement.dataset.column +
+                    '_' +
+                    (node.id ? node.id.replace(/\//g, '_') : '');
+                if (chipData) {
+                    const existingChip = chipData.find((x) => x.value === key);
+                    if (existingChip) {
+                        chipData.splice(chipData.indexOf(existingChip), 1);
+                    }
+                    else {
+                        chipData.push({
+                            icon: node.icon,
+                            value: node.value,
+                            obj: node.obj,
+                            id: key,
+                        });
+                    }
+                    apply.classList.add('visible');
+                }
+                else {
+                    chip.data['chip'] = [
+                        {
+                            icon: node.icon,
+                            label: node.value,
+                            obj: node.obj,
+                            value: key,
+                        },
+                    ];
+                }
+                chip.refresh();
+            }
+        }
     }
-    else if (component.oldSizeY) {
-      collapsibleCard.classList.remove('.' + KupCardCSSClasses.EXPANDED);
-      component.sizeY = component.oldSizeY;
+    // Apply button: a new chip will be created with updated data.
+    if (root &&
+        e.type === KupCardSubEvents.BUTTON_CLICK &&
+        e.detail.id === KupColumnMenuIds.BUTTON_APPLY) {
+        const chip = root.querySelector('#' + KupCardIds.COLUMNS_LIST);
+        component.data.chip[0]['data'] = chip.data;
     }
-    return;
-  }
-  /*-------------------------------------------------*/
-  /*      1 4 t h   S t a n d a r d  L a y o u t     */
-  /*-------------------------------------------------*/
-  // Tab change: when a tab is clicked, the corresponding view will be activated while the others will become hidden.
-  if (root &&
-    e.type === KupCardSubEvents.TABBAR_CLICK &&
-    e.detail.id === KupCardIds.VIEW_SELECTOR) {
-    const views = root.querySelectorAll('.' + KupCardCSSClasses.CARD_VIEW);
-    for (let index = 0; index < views.length; index++) {
-      const view = views[index];
-      if (view.classList.contains(KupCardCSSClasses.VIEW_PREFIX + (e.detail.index + 1))) {
-        view.classList.add(KupCardCSSClasses.VISIBLE);
-      }
-      else {
-        view.classList.remove(KupCardCSSClasses.VISIBLE);
-      }
+    /*-------------------------------------------------*/
+    /*        4 t h   D i a l o g   L a y o u t        */
+    /*-------------------------------------------------*/
+    // Refresh when switching row
+    if (e.type === KupCardSubEvents.BUTTON_CLICK &&
+        (e.detail.id === KupCardIds.NEXT_ROW ||
+            e.detail.id === KupCardIds.PREVIOUS_ROW)) {
+        component.refresh();
     }
-  }
-  // Chip deleted: when a chip is deleted, the apply button must appear.
-  if (root &&
-    e.type === KupCardSubEvents.CHIP_ICONCLICK &&
-    e.detail.id === KupCardIds.COLUMNS_LIST) {
-    const apply = root.querySelector('#' + KupColumnMenuIds.BUTTON_APPLY);
-    apply.classList.add('visible');
-  }
-  // Chip creation: upon clicking on the tree, the chip list will updated by adding or removing an entry.
-  if (root &&
-    e.type === KupCardSubEvents.TREE_NODESELECTED &&
-    e.detail.id === KupCardIds.EXTRA_COLUMNS) {
-    if (e.detail.treeNode) {
-      const apply = root.querySelector('#' + KupColumnMenuIds.BUTTON_APPLY);
-      const chip = root.querySelector('#' + KupCardIds.COLUMNS_LIST);
-      const node = e.detail.treeNode;
-      const obj = e.detail.treeNode.obj;
-      if (obj &&
-        obj.t !== '' &&
-        (obj.t !== '**' || (obj.t === '**' && !obj.k))) {
-        const chipData = chip && chip.data ? chip.data : null;
-        // This should be handled server-side, data should arrive correctly.
-        // Right now the only way to bind chips with tree nodes is a consistent value - which is the child column's name.
-        // Hence, the algorithm below.
-        const key = component.rootElement.dataset.column +
-          '_' +
-          (node.id ? node.id.replace(/\//g, '_') : '');
-        if (chipData) {
-          const existingChip = chipData.find((x) => x.value === key);
-          if (existingChip) {
-            chipData.splice(chipData.indexOf(existingChip), 1);
-          }
-          else {
-            chipData.push({
-              icon: node.icon,
-              value: node.value,
-              obj: node.obj,
-              id: key,
-            });
-          }
-          apply.classList.add('visible');
+    /*-------------------------------------------------*/
+    /*      1 5t h   S t a n d a r d  L a y o u t     */
+    /*-------------------------------------------------*/
+    // Tab change: when a tab is clicked, the corresponding view will be activated while the others will become hidden.
+    if (root &&
+        e.type === KupCardSubEvents.BUTTON_CLICK &&
+        e.detail.id === KupCardIds.VIEW_SELECTOR) {
+        const views = root.querySelectorAll('.' + KupCardCSSClasses.CARD_VIEW);
+        if (e.detail.value === 'on') {
+            views[0].classList.remove(KupCardCSSClasses.VISIBLE);
+            views[1].classList.add(KupCardCSSClasses.VISIBLE);
         }
         else {
-          chip.data['chip'] = [
-            {
-              icon: node.icon,
-              label: node.value,
-              obj: node.obj,
-              value: key,
-            },
-          ];
+            views[1].classList.remove(KupCardCSSClasses.VISIBLE);
+            views[0].classList.add(KupCardCSSClasses.VISIBLE);
         }
-        chip.refresh();
-      }
-    }
-  }
-  // Apply button: a new chip will be created with updated data.
-  if (root &&
-    e.type === KupCardSubEvents.BUTTON_CLICK &&
-    e.detail.id === KupColumnMenuIds.BUTTON_APPLY) {
-    const chip = root.querySelector('#' + KupCardIds.COLUMNS_LIST);
-    component.data.chip[0]['data'] = chip.data;
-  }
-  /*-------------------------------------------------*/
-  /*        4 t h   D i a l o g   L a y o u t        */
-  /*-------------------------------------------------*/
-  // Refresh when switching row
-  if (e.type === KupCardSubEvents.BUTTON_CLICK &&
-    (e.detail.id === KupCardIds.NEXT_ROW ||
-      e.detail.id === KupCardIds.PREVIOUS_ROW)) {
-    component.refresh();
-  }
-  /*-------------------------------------------------*/
-  /*      1 5t h   S t a n d a r d  L a y o u t     */
-  /*-------------------------------------------------*/
-  // Tab change: when a tab is clicked, the corresponding view will be activated while the others will become hidden.
-  if (root &&
-    e.type === KupCardSubEvents.BUTTON_CLICK &&
-    e.detail.id === KupCardIds.VIEW_SELECTOR) {
-    const views = root.querySelectorAll('.' + KupCardCSSClasses.CARD_VIEW);
-    if (e.detail.value === 'on') {
-      views[0].classList.remove(KupCardCSSClasses.VISIBLE);
-      views[1].classList.add(KupCardCSSClasses.VISIBLE);
-    }
-    else {
-      views[1].classList.remove(KupCardCSSClasses.VISIBLE);
-      views[0].classList.add(KupCardCSSClasses.VISIBLE);
     }
-  }
 }