@sme.up/ketchup 8.3.2 → 9.0.0

package/dist/cjs/kup-dash-list.cjs.entry.js

@@ -1,116 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a9a3b467.js');
-const kupManager = require('./kup-manager-b3677c1d.js');
-
-const kupDashListCss = ".horizontal{display:inline-block;min-width:300px;max-width:100%;overflow:visible;white-space:nowrap;border:solid;border-width:1px;margin:2px}";
-
-const KupDashList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dashClick = index.createEvent(this, "kup-dash-click", 7);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManager.kupManagerInstance();
-    this.layout = '1';
-    this.fontsize = '';
-    this.active = false;
-    this.columnsNumber = 1;
-    this.fullWidth = true;
-    this.horizontal = false;
-    this.iconColor = [];
-    this.valueColor = [];
-    this.textColor = [];
-    this.data = undefined;
-  }
-  render() {
-    let rows = [];
-    var count = 0;
-    this.data.rows.forEach((r) => {
-      let icon = '';
-      let unit = '';
-      let descr = '';
-      let value = '';
-      let valueInt = '';
-      let valueDec = '';
-      let iconColor = {
-        color: this.iconColor[count]
-          ? this.kupManager.theme.colorCheck(this.iconColor[count])
-            .hexColor
-          : null,
-      };
-      let textColor = {
-        color: this.textColor[count]
-          ? this.kupManager.theme.colorCheck(this.textColor[count])
-            .hexColor
-          : null,
-      };
-      let valueColor = {
-        color: this.valueColor[count]
-          ? this.kupManager.theme.colorCheck(this.valueColor[count])
-            .hexColor
-          : null,
-      };
-      if (this.data.columns[0]) {
-        icon = (index.h("div", { slot: "icon" }, index.h("icon", { class: r.cells[this.data.columns[0].name].obj.k, style: iconColor })));
-      }
-      else {
-        icon = index.h("div", { slot: "icon" });
-      }
-      if (this.data.columns[1]) {
-        unit = (index.h("div", { slot: "unit", style: valueColor }, r.cells[this.data.columns[1].name].obj.k, ' '));
-      }
-      else {
-        unit = index.h("div", { slot: "unit" });
-      }
-      if (this.data.columns[2]) {
-        descr = (index.h("div", { slot: "descr", style: textColor }, r.cells[this.data.columns[2].name].obj.k));
-      }
-      else {
-        descr = index.h("div", { slot: "descr" });
-      }
-      if (this.data.columns[3]) {
-        let col = this.data.columns[3];
-        col.obj = r.cells[this.data.columns[3].name].obj;
-        let newValue = kupManager.getCellValueForDisplay(col, r.cells[this.data.columns[3].name]);
-        value = (index.h("div", { slot: "value", style: valueColor }, newValue));
-      }
-      else {
-        value = index.h("div", { slot: "value" });
-      }
-      if (this.data.columns[5]) {
-        let col = this.data.columns[5];
-        col.obj = r.cells[this.data.columns[5].name].obj;
-        let newValue = kupManager.getCellValueForDisplay(col, r.cells[this.data.columns[5].name]);
-        if (this.data.columns[6] &&
-          r.cells[this.data.columns[6].name].obj.k) {
-          newValue =
-            newValue + this.kupManager.math.decimalSeparator();
-        }
-        valueInt = (index.h("div", { slot: "value-int", style: valueColor }, newValue));
-      }
-      else {
-        valueInt = index.h("div", { slot: "value-int" });
-      }
-      if (this.data.columns[6]) {
-        valueDec = (index.h("div", { slot: "value-dec", style: valueColor }, r.cells[this.data.columns[6].name].obj.k));
-      }
-      else {
-        valueDec = index.h("div", { slot: "value-dec" });
-      }
-      const row = (index.h("kup-dash", { layout: this.layout, fontsize: this.fontsize, index: count, active: this.active, slot: String(count) }, icon, unit, descr, value, valueInt, valueDec));
-      rows.push(row);
-      count++;
-    });
-    return (index.h("div", null, index.h("link", { href: "https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css", rel: "stylesheet", type: "text/css" }), index.h("kup-grid", { columns: this.columnsNumber, singleLine: this.horizontal, class: `${this.fullWidth ? 'kup-full-width' : ''}` }, rows)));
-  }
-};
-KupDashList.style = kupDashListCss;
-
-exports.kup_dash_list = KupDashList;

package/dist/cjs/kup-dash_2.cjs.entry.js

@@ -1,179 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-a9a3b467.js');
-const kupManager = require('./kup-manager-b3677c1d.js');
-const GenericVariables = require('./GenericVariables-9cd88034.js');
-
-const kupDashCss = "#dash{color:var(--kup-text-color);font-size:2vw;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;position:relative;word-break:normal}#dash.with-dyn{cursor:pointer}#dash #content .icon{margin:auto;font-size:90%}#dash #content.layout-1,#dash #content.layout-3{text-align:center}#dash #content.layout-1 .descr,#dash #content.layout-3 .descr{font-size:70%;width:100%}#dash #content.layout-1 .value,#dash #content.layout-3 .value{font-size:220%}#dash #content.layout-2>div{display:flex}#dash #content.layout-2>div .icon{margin:auto;font-size:150%;margin-right:5%}#dash #content.layout-2>div .value-int{font-size:250%}#dash #content.layout-2>div .value-dec,#dash #content.layout-2>div .unit{font-size:130%;margin-top:auto;margin-bottom:7%}#dash #content.layout-2>div .value-dec{margin-left:2%}#dash #content.layout-2>div .unit{margin-left:4%}#dash #content.layout-4>div{display:grid;grid-template-columns:2fr 5fr}#dash #content.layout-4>div .icon{margin:auto;font-size:150%;margin-right:5%}#dash #content.layout-4>div .value-and-unit{display:flex}#dash #content.layout-4>div .value-and-unit .value-int{font-size:250%}#dash #content.layout-4>div .value-and-unit .value-dec,#dash #content.layout-4>div .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:7%}#dash #content.layout-4>div .value-and-unit .value-dec{margin-left:2%}#dash #content.layout-4>div .value-and-unit .unit{margin-left:4%}#dash #content.layout-4>div .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}#dash #content.layout-5>div,#dash #content.layout-7>div{display:flex}#dash #content.layout-5>div .icon,#dash #content.layout-7>div .icon{font-size:150%;margin:auto;margin-left:10%}#dash #content.layout-5>div .value,#dash #content.layout-7>div .value{font-size:200%}#dash #content.layout-5>div .descr,#dash #content.layout-7>div .descr{text-align:right;font-size:65%;width:100%;min-width:max-content}#dash #content.layout-6>div{display:flex;justify-content:space-between}#dash #content.layout-6>div .icon{font-size:150%;margin-right:10%}#dash #content.layout-6>div .value{font-size:220%;text-align:right}#dash #content.layout-6>div .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}#dash #content.layout-8>div{display:flex;align-items:center}#dash #content.layout-8>div .icon{margin-right:4%;font-size:75%}#dash #content.layout-8>div .value{margin:0 10%;font-size:250%}#dash #content.layout-8>div .descr{font-size:60%;text-align:left}";
-
-const KupDash = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dashClick = index.createEvent(this, "kup-dash-click", 6);
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManager.kupManagerInstance();
-    this.active = false;
-    this.fontsize = '';
-    this.layout = '1';
-    this.index = 0;
-  }
-  onDshClickHandler() {
-    this.dashClick.emit({
-      id: this.index,
-    });
-  }
-  //---- Lifecycle hooks ----
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-  }
-  componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    let content = null;
-    switch (this.layout) {
-      case '2':
-        content = (index.h("div", null, index.h("div", { class: "icon" }, index.h("slot", { name: "icon" })), index.h("div", { class: "value-int" }, index.h("slot", { name: "value-int" })), index.h("div", { class: "value-dec" }, index.h("slot", { name: "value-dec" })), index.h("div", { class: "unit" }, index.h("slot", { name: "unit" }))));
-        break;
-      case '3':
-        content = (index.h("div", null, index.h("div", { class: "value" }, index.h("slot", { name: "value" })), index.h("div", { class: "descr" }, index.h("slot", { name: "descr" }))));
-        break;
-      case '4':
-        content = (index.h("div", null, index.h("div", { class: "icon" }, index.h("slot", { name: "icon" })), index.h("div", { class: "value-and-unit" }, index.h("div", { class: "value-int" }, index.h("slot", { name: "value-int" })), index.h("div", { class: "value-dec" }, index.h("slot", { name: "value-dec" })), index.h("div", { class: "unit" }, index.h("slot", { name: "unit" }))), index.h("div", null), index.h("div", { class: "descr" }, index.h("slot", { name: "descr" }))));
-        break;
-      case '5':
-        content = (index.h("div", null, index.h("div", null, index.h("div", { class: "descr" }, index.h("slot", { name: "descr" })), index.h("div", { class: "value" }, index.h("slot", { name: "value" }))), index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))));
-        break;
-      case '6':
-        content = (index.h("div", null, index.h("div", { class: "icon" }, index.h("slot", { name: "icon" })), index.h("div", null, index.h("div", { class: "value" }, index.h("slot", { name: "value" })), index.h("div", { class: "descr" }, index.h("slot", { name: "descr" })))));
-        break;
-      case '7':
-        content = (index.h("div", null, index.h("div", null, index.h("div", { class: "value" }, index.h("slot", { name: "value" })), index.h("div", { class: "descr" }, index.h("slot", { name: "descr" }))), index.h("div", { class: "icon" }, index.h("slot", { name: "icon" }))));
-        break;
-      case '8':
-        content = (index.h("div", null, index.h("div", { class: "icon" }, index.h("slot", { name: "icon" })), index.h("div", { class: "value" }, index.h("slot", { name: "value" })), index.h("div", { class: "descr" }, index.h("slot", { name: "descr" }))));
-        break;
-      default:
-        // layout 1
-        content = (index.h("div", null, index.h("div", { class: "descr" }, index.h("slot", { name: "descr" })), index.h("div", { class: "value" }, index.h("slot", { name: "value" }))));
-        break;
-    }
-    const style = { fontSize: this.fontsize };
-    return (index.h("div", { id: "dash", class: `${this.active ? 'with-dyn' : ''}`, style: style, onClick: () => this.onDshClickHandler() }, index.h("div", { id: "content", class: `layout-${this.layout} ` }, content)));
-  }
-  get rootElement() { return index.getElement(this); }
-};
-KupDash.style = kupDashCss;
-
-/**
- * Props of the kup-grid component.
- * Used to export every prop in an object.
- */
-var KupGridProps;
-(function (KupGridProps) {
-  KupGridProps["columns"] = "The number of columns displayed by the grid, the default behavior is 12.";
-  KupGridProps["customStyle"] = "Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization";
-  KupGridProps["singleLine"] = "When set to true, forces the content on a single line.";
-})(KupGridProps || (KupGridProps = {}));
-
-const kupGridCss = ":host{--kup_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{box-sizing:border-box;display:flex;justify-content:center;margin:0px;width:auto}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 8), minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 4), minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}";
-
-const KupGrid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManager.kupManagerInstance();
-    this.columns = 12;
-    this.customStyle = '';
-    this.singleLine = false;
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * 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 kupManager.getProps(this, KupGridProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    index.forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    kupManager.setProps(this, KupGridProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    const slots = this.rootElement.children;
-    if (!slots || slots.length === 0) {
-      this.kupManager.debug.logMessage(this, 'Missing slots, not rendering!', kupManager.KupDebugCategory.WARNING);
-      return;
-    }
-    const content = [];
-    for (let i = 0; i < slots.length; i++) {
-      let el = null;
-      if (this.singleLine) {
-        el = index.h("slot", { name: `${i}` });
-      }
-      else {
-        const span = slots[i]['span'] || slots[i].getAttribute('span') || 1;
-        el = (index.h("div", { class: `layout-grid__cell layout-grid__cell--span-${span}` }, index.h("slot", { name: `${i}` })));
-      }
-      content.push(el);
-    }
-    const style = {};
-    if (this.columns && this.columns !== 12) {
-      style['--kup_grid_columns'] = this.columns;
-    }
-    return (index.h(index.Host, { style: style }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: this.singleLine ? 'flex-layout' : 'layout-grid' }, index.h("div", { class: this.singleLine
-        ? 'flex-layout__inner'
-        : 'layout-grid__inner' }, content)))));
-  }
-  disconnectedCallback() {
-    this.kupManager.theme.unregister(this);
-  }
-  get rootElement() { return index.getElement(this); }
-};
-KupGrid.style = kupGridCss;
-
-exports.kup_dash = KupDash;
-exports.kup_grid = KupGrid;