@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,7 +1,9 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
+import * as builtinLayouts from './builtin/kup-card-builtin';
 import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
 import * as dialogLayouts from './dialog/kup-card-dialog';
+import * as freeLayouts from './free/kup-card-free';
 import * as scalableLayouts from './scalable/kup-card-scalable';
 import * as standardLayouts from './standard/kup-card-standard';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
@@ -79,12 +81,20 @@ export class KupCard {
      */
     this.scalingActive = false;
   }
-  onKupClick(id) {
+  onKupClick(id, value) {
     this.kupClick.emit({
       comp: this,
       id: id,
+      value: value,
     });
   }
+  onKupClose(id) {
+    this.kupClose.emit({
+      comp: this,
+      id: id,
+    });
+    this.rootElement.remove();
+  }
   onKupEvent(e) {
     layoutSpecificEvents(this, e);
     this.kupEvent.emit({
@@ -138,7 +148,7 @@ export class KupCard {
       // The dialog "X" button.
       const dialogClose = root.querySelector('#' + KupCardIds.DIALOG_CLOSE);
       if (dialogClose) {
-        dialogClose.onclick = () => this.rootElement.remove();
+        dialogClose.onclick = () => this.onKupClose(KupCardIds.DIALOG_CLOSE);
       }
       // When an element can be clicked. Ideally anchors/links.
       const links = root.querySelectorAll('.' + KupCardCSSClasses.CLICKABLE_LINK);
@@ -146,7 +156,7 @@ export class KupCard {
         const link = links[index];
         link.onclick = (e) => {
           e.stopPropagation();
-          this.onKupClick(link.id);
+          this.onKupClick(link.id, null);
         };
       }
     }
@@ -182,12 +192,18 @@ export class KupCard {
     const method = 'create' + this.layoutNumber;
     try {
       switch (family) {
+        case KupCardFamily.BUILTIN: {
+          return builtinLayouts[method](this);
+        }
         case KupCardFamily.COLLAPSIBLE: {
           return collapsibleLayouts[method](this);
         }
         case KupCardFamily.DIALOG: {
           return dialogLayouts[method](this);
         }
+        case KupCardFamily.FREE: {
+          return freeLayouts[method](this);
+        }
         case KupCardFamily.SCALABLE: {
           return scalableLayouts[method](this);
         }
@@ -216,8 +232,8 @@ export class KupCard {
       const card = this.rootElement;
       const dragHandle = root.querySelector('#' + KupCardIds.DRAG_HANDLE);
       const unresizable = !!root.querySelector('.' + KupCardCSSClasses.DIALOG_UNRESIZABLE);
-      if (!this.kupManager.dialog.isRegistered(card)) {
-        this.kupManager.dialog.register(card, dragHandle ? dragHandle : null, unresizable);
+      if (!this.kupManager.interact.isRegistered(card)) {
+        this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
       }
     }
   }
@@ -267,6 +283,7 @@ export class KupCard {
     root.addEventListener('kup-chip-iconclick', this.cardEvent);
     root.addEventListener('kup-combobox-itemclick', this.cardEvent);
     root.addEventListener('kup-datatable-cellupdate', this.cardEvent);
+    root.addEventListener('kup-datatable-rowselected', this.cardEvent);
     root.addEventListener('kup-datepicker-cleariconclick', this.cardEvent);
     root.addEventListener('kup-datepicker-input', this.cardEvent);
     root.addEventListener('kup-datepicker-itemclick', this.cardEvent);
@@ -358,6 +375,10 @@ export class KupCard {
       MDCRipple.attachTo(rippleEl);
     }
     this.kupManager.resize.observe(this.rootElement);
+    this.kupReady.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -377,23 +398,22 @@ export class KupCard {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    if (!this.data) {
+    if (!this.data && this.rootElement.children.length < 1) {
       return;
     }
     const style = {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: style },
-      customStyle ? h("style", null, customStyle) : null,
-      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null) }, this.getLayout())));
   }
   disconnectedCallback() {
+    this.kupManager.interact.unregister([this.rootElement]);
     this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-    this.kupManager.dialog.unregister([this.rootElement]);
     this.kupManager.resize.unobserve(this.rootElement);
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-card"; }
   static get encapsulation() { return "shadow"; }
@@ -416,11 +436,11 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -445,8 +465,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The actual data of the card."
       },
@@ -464,8 +484,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defines whether the card is a menu or not.\nWorks together with menuVisible."
       },
@@ -478,7 +498,7 @@ export class KupCard {
       "mutable": false,
       "complexType": {
         "original": "KupCardFamily",
-        "resolved": "KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
+        "resolved": "KupCardFamily.BUILTIN | KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.FREE | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
         "references": {
           "KupCardFamily": {
             "location": "import",
@@ -490,8 +510,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupCardFamily.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "KupCardFamily.STANDARD"
           }],
         "text": "Sets the type of the card."
       },
@@ -511,8 +531,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Sets the number of the layout."
       },
@@ -532,8 +552,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets the status of the card as menu, when false it's hidden otherwise it's visible.\nWorks together with isMenu."
       },
@@ -553,8 +573,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
       },
@@ -574,8 +594,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -594,6 +614,26 @@ export class KupCard {
         "tags": [],
         "text": "Triggered when the card is clicked."
       },
+      "complexType": {
+        "original": "KupCardClickPayload",
+        "resolved": "KupCardClickPayload",
+        "references": {
+          "KupCardClickPayload": {
+            "location": "import",
+            "path": "./kup-card-declarations"
+          }
+        }
+      }
+    }, {
+      "method": "kupClose",
+      "name": "kup-card-close",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when a dialog card is closed with the \"X\"."
+      },
       "complexType": {
         "original": "KupEventPayload",
         "resolved": "KupEventPayload",
@@ -624,6 +664,26 @@ export class KupCard {
           }
         }
       }
+    }, {
+      "method": "kupReady",
+      "name": "kup-card-ready",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the component is ready."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "getProps": {
@@ -631,8 +691,8 @@ export class KupCard {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -695,8 +755,8 @@ export class KupCard {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],

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

@@ -675,3 +675,78 @@ export function create14(component) {
           : null),
         h("div", { class: "sub-switch" }, switchesIds.includes(KupColumnMenuIds.SWITCH_KEY) ? (h("kup-switch", Object.assign({}, switchArray.find((x) => x.id === KupColumnMenuIds.SWITCH_KEY)))) : null))) : null)));
 }
+/**
+ * 15th standard card layout, it can be used as a tooltip.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 15th standard layout virtual node.
+ */
+export function create15(component) {
+  const buttonArray = component.data['button']
+    ? component.data['button']
+    : [];
+  const imageArray = component.data['image']
+    ? component.data['image']
+    : [];
+  const textArray = component.data['text']
+    ? component.data['text']
+    : [];
+  const treeArray = component.data['tree']
+    ? component.data['tree']
+    : [];
+  // Setting up currently visible view.
+  const viewIndex = 1;
+  const sectionOneArray = textArray.slice(0, 5);
+  // Setting up section 2
+  const sectionTwoArray = textArray.slice(5);
+  const sectionTwoDetails = [];
+  const labels = [];
+  const values = [];
+  for (let index = 0; index < sectionTwoArray.length; index++) {
+    if (index % 2 === 0) {
+      labels.push(sectionTwoArray[index]);
+    }
+    else {
+      values.push(sectionTwoArray[index]);
+    }
+  }
+  for (let index = 0; index < labels.length; index++) {
+    sectionTwoDetails.push(h("div", { class: "detail-row" },
+      h("div", { class: "detail-row__label ellipsis" }, labels[index]),
+      h("div", { class: "detail-row__value ellipsis" }, values[index])));
+  }
+  // Setting up buttons.
+  const buttonsIds = [];
+  for (let index = 0; index < buttonArray.length; index++) {
+    const button = buttonArray[index];
+    if (button['id']) {
+      buttonsIds.push(button['id']);
+    }
+  }
+  return (h("div", { class: `standard-layout-${component.layoutNumber}` },
+    h("div", { class: "section-1" },
+      imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" },
+        h("kup-spinner", { active: true, dimensions: "7px", layout: 14 }))),
+      h("div", { class: "sub-1" },
+        textArray[0] ? (h("div", { class: "title" },
+          h("span", { class: `label ${KupCardCSSClasses.CLICKABLE_LINK}`, id: "title-link" }, textArray[0]),
+          buttonsIds.includes(KupColumnMenuIds.BUTTON_OPEN_IN_NEW) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+            KupColumnMenuIds.BUTTON_OPEN_IN_NEW)))) : null,
+          buttonsIds.includes(KupColumnMenuIds.BUTTON_SEARCH) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
+            KupColumnMenuIds.BUTTON_SEARCH)))) : null)) : null,
+        sectionOneArray[1] && sectionOneArray[2] ? (h("div", { class: "info" },
+          h("span", { class: "label" }, sectionOneArray[1]),
+          h("span", { class: "value" }, sectionOneArray[2]))) : null,
+        sectionOneArray[3] && sectionOneArray[4] ? (h("div", { class: "info" },
+          h("span", { class: "label" }, sectionOneArray[3]),
+          h("span", { class: "value" }, sectionOneArray[4]))) : null)),
+    h("div", { class: "section-2" },
+      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex} ${KupCardCSSClasses.VISIBLE}` },
+        h("div", { class: "info" }, sectionTwoDetails.length > 0
+          ? sectionTwoDetails
+          : null)),
+      h("div", { class: `${KupCardCSSClasses.CARD_VIEW} ${KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` },
+        h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0])))),
+    buttonArray.length > 0 ? (h("div", { class: "section-3" },
+      compList(buttonArray.slice(0, 4), 'button'),
+      h("kup-button", { id: "view-selector", icon: "menu" }))) : null));
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Props of the kup-cell component.
+ * Used to export every prop in an object.
+ */
+export var KupCellProps;
+(function (KupCellProps) {
+  KupCellProps["customStyle"] = "Custom style of the component.";
+  KupCellProps["data"] = "The data of the cell.";
+  KupCellProps["density"] = "The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'.";
+  KupCellProps["dragEnabled"] = "When set to true, the component is draggable.";
+})(KupCellProps || (KupCellProps = {}));

package/dist/collection/components/kup-cell/kup-cell.css

@@ -0,0 +1,20 @@
+/**
+* @prop --kup-cell-background: Sets the background of the cell.
+* @prop --kup-cell-font-family: Sets the font family of the cell.
+* @prop --kup-cell-font-family-monospace: Sets the monospace font family of the cell (for numbers).
+* @prop --kup-cell-font-size: Sets the font size of the cell.
+* @prop --kup-cell-text-color: Sets the text color of the cell.
+*
+* NOTE: These variables are defined in the "kup-theme.css" file, because they must work even without the kup component (it's a functional component)
+*
+*/
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+#kup-component {
+  height: 100%;
+  width: 100%;
+}