@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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%;
+}

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

@@ -0,0 +1,413 @@
+import { Component, Element, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
+import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupCellProps } from './kup-cell-declarations';
+import { FCell } from '../../f-components/f-cell/f-cell';
+import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
+import { KupDragEffect, } from '../../utils/kup-interact/kup-interact-declarations';
+import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+export class KupCell {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * The data of the cell.
+     * @default false
+     */
+    this.data = null;
+    /**
+     * The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'.
+     */
+    this.density = FCellPadding.NONE;
+    /**
+     * When set to true, the component is draggable.
+     * @default false
+     */
+    this.dragEnabled = false;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Adds the given CSS classes to the cell's data.
+   * @param {string[]} classes - Array of CSS classes.
+   */
+  async addCssClasses(classes) {
+    if (!this.data.cssClass) {
+      this.data.cssClass = '';
+    }
+    if (classes) {
+      for (let index = 0; index < classes.length; index++) {
+        const cssClass = classes[index];
+        if (this.data.cssClass.indexOf(cssClass) < 0) {
+          this.data.cssClass += ` ${cssClass}`;
+        }
+      }
+    }
+    this.refresh();
+  }
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupCellProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Removes the given CSS classes from the cell's data.
+   * @param {string[]} classes - Array of CSS classes.
+   */
+  async removeCssClasses(classes) {
+    if (!this.data.cssClass) {
+      return;
+    }
+    if (classes) {
+      for (let index = 0; index < classes.length; index++) {
+        const cssClass = classes[index];
+        if (this.data.cssClass.indexOf(cssClass) > 0) {
+          this.data.cssClass = this.data.cssClass.replace(new RegExp(cssClass, 'g'), '');
+        }
+      }
+    }
+    this.refresh();
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupCellProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  didRenderInteractables() {
+    if (this.dragEnabled) {
+      const dataCb = () => {
+        return {
+          cell: this.data,
+          column: this.generateColumn(),
+          id: this.rootElement.id,
+          multiple: false,
+          row: this.generateRow(),
+        };
+      };
+      this.kupManager.interact.draggable(this.rootElement.shadowRoot.querySelector('#' + componentWrapperId), {
+        cursorChecker() {
+          return null;
+        },
+      }, {
+        callback: dataCb,
+      }, KupDragEffect.BADGE);
+    }
+  }
+  generateColumn() {
+    const colname = this.data && this.data.obj && this.data.obj.t
+      ? this.data.obj.t + '|' + this.data.obj.p
+      : 'KUPCELL';
+    const coltitle = this.data && this.data.obj && this.data.obj.t
+      ? this.data.obj.t + '|' + this.data.obj.p
+      : this.kupManager.language.translate(KupLanguageGeneric.EMPTY_OBJECT);
+    return {
+      name: colname,
+      title: coltitle,
+    };
+  }
+  generateRow() {
+    const col = this.generateColumn();
+    const row = { cells: {} };
+    row.cells[col.name] = this.data;
+    return row;
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.language.register(this);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    this.didRenderInteractables();
+    this.kupManager.debug.logRender(this, true);
+  }
+  disconnectedCallback() {
+    this.kupManager.language.unregister(this);
+    this.kupManager.theme.unregister(this);
+  }
+  render() {
+    const props = {
+      cell: this.data,
+      column: this.generateColumn(),
+      component: this,
+      density: this.density,
+      editable: this.data.isEditable,
+      renderKup: true,
+      row: this.generateRow(),
+    };
+    return (h(Host, null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId },
+        h(FCell, Object.assign({}, props)))));
+  }
+  static get is() { return "kup-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-cell.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-cell.css"]
+  }; }
+  static get properties() { return {
+    "customStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+          }],
+        "text": "Custom style of the component."
+      },
+      "attribute": "custom-style",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "data": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Cell",
+        "resolved": "Cell",
+        "references": {
+          "Cell": {
+            "location": "import",
+            "path": "../kup-data-table/kup-data-table-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }],
+        "text": "The data of the cell."
+      },
+      "defaultValue": "null"
+    },
+    "density": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FCellPadding",
+        "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+        "references": {
+          "FCellPadding": {
+            "location": "import",
+            "path": "../../f-components/f-cell/f-cell-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'."
+      },
+      "attribute": "density",
+      "reflect": false,
+      "defaultValue": "FCellPadding.NONE"
+    },
+    "dragEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }],
+        "text": "When set to true, the component is draggable."
+      },
+      "attribute": "drag-enabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get methods() { return {
+    "addCssClasses": {
+      "complexType": {
+        "signature": "(classes?: string[]) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "classes - Array of CSS classes."
+              }],
+            "text": "- Array of CSS classes."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Adds the given CSS classes to the cell's data.",
+        "tags": [{
+            "name": "param",
+            "text": "classes - Array of CSS classes."
+          }]
+      }
+    },
+    "getProps": {
+      "complexType": {
+        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+        "parameters": [{
+            "tags": [{
+                "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."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<GenericObject>"
+      },
+      "docs": {
+        "text": "Used to retrieve component's props values.",
+        "tags": [{
+            "name": "param",
+            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+          }, {
+            "name": "returns",
+            "text": "List of props as object, each key will be a prop."
+          }]
+      }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is used to trigger a new render of the component.",
+        "tags": []
+      }
+    },
+    "removeCssClasses": {
+      "complexType": {
+        "signature": "(classes?: string[]) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "classes - Array of CSS classes."
+              }],
+            "text": "- Array of CSS classes."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Removes the given CSS classes from the cell's data.",
+        "tags": [{
+            "name": "param",
+            "text": "classes - Array of CSS classes."
+          }]
+      }
+    },
+    "setProps": {
+      "complexType": {
+        "signature": "(props: GenericObject) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "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."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the props to the component.",
+        "tags": [{
+            "name": "param",
+            "text": "props - Object containing props that will be set to the component."
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "rootElement"; }
+}