@sme.up/ketchup 4.0.0 → 4.2.0

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

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

@@ -504,9 +504,8 @@ export class KupChart {
       width: this.sizeX,
       minWidth: this.sizeX,
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: this.elStyle },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, ref: (chartContainer) => (this.chartContainer = chartContainer) })));
   }
   disconnectedCallback() {
@@ -539,8 +538,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs."
       },
@@ -559,8 +558,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Sets the axis of the chart."
       },
@@ -584,8 +583,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Title of the graph."
       }
@@ -602,8 +601,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "Colors of the chart."
       },
@@ -621,11 +620,11 @@ export class KupChart {
       "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."
       },
@@ -650,8 +649,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The actual data of the chart."
       }
@@ -673,8 +672,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Customize the hAxis."
       }
@@ -711,8 +710,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"right\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"right\""
           }],
         "text": "Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work."
       },
@@ -737,8 +736,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Renders charts without the Google API and using jQuery Sparkline."
       },
@@ -761,8 +760,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The data series to be displayed. They must be of the same type."
       }
@@ -779,8 +778,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Displays the numerical values."
       },
@@ -800,8 +799,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
       },
@@ -821,8 +820,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -847,8 +846,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Used to sort series."
       },
@@ -889,8 +888,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[ChartType.Hbar]",
-            "name": "default"
+            "name": "default",
+            "text": "[ChartType.Hbar]"
           }],
         "text": "The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar."
       },
@@ -933,8 +932,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Customize the vAxis."
       }
@@ -971,8 +970,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"45.2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"45.2\""
           }],
         "text": "Google chart version to load"
       },
@@ -1008,8 +1007,8 @@ export class KupChart {
         "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."
           }],
@@ -1072,8 +1071,8 @@ export class KupChart {
         "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."
           }],