@sme.up/ketchup 8.3.3 → 9.1.0

package/dist/collection/f-components/f-progress-bar/f-progress-bar.js

@@ -0,0 +1,88 @@
+import { getAssetPath, h } from "@stencil/core";
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+export const FProgressBar = (props) => {
+  if (!props.centeredLabel && !props.centeredLabel !== false) {
+    props.centeredLabel = true;
+  }
+  let componentClass = `f-progress-bar ${props.danger ? 'kup-danger' : ''} ${props.animated ? 'kup-animated' : ''} ${props.padded ? 'kup-padded' : ''} ${props.info ? 'kup-info' : ''} ${props.slim ? 'kup-slim' : ''} ${props.striped ? 'kup-striped' : ''}   ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`;
+  let pieClass = 'pie';
+  let radialStyle = undefined;
+  if (props.isRadial) {
+    componentClass += ' pie-wrapper is-radial';
+  }
+  else {
+    componentClass += ' progress-bar';
+  }
+  let labelStyle = undefined;
+  const valueStyle = {
+    width: `${props.value}%`,
+  };
+  if (!props.centeredLabel) {
+    labelStyle = valueStyle;
+    if (props.value > 2) {
+      componentClass += ' text-color-on-primary';
+    }
+  }
+  else if (props.value > 49) {
+    componentClass += ' text-color-on-primary';
+  }
+  let label = null;
+  if (props.icon) {
+    label = createIconElement(props);
+  }
+  else {
+    if (!props.hideLabel) {
+      if (props.isRadial) {
+        if (props.label) {
+          label = h("span", { class: "label" }, props.label);
+        }
+        else {
+          label = (h("span", { class: "label" }, props.value, h("span", { class: "smaller" }, "%")));
+        }
+      }
+      else {
+        if (props.label) {
+          label = props.label;
+        }
+        else {
+          label = props.value + '%';
+        }
+      }
+    }
+  }
+  if (props.value > 0) {
+    pieClass += ' has-value';
+    if (props.value > 50) {
+      pieClass += ' is-more-than-half';
+    }
+    else {
+      pieClass += ' is-less-than-half';
+    }
+  }
+  if (props.isRadial) {
+    return (h("div", { class: componentClass }, label, h("div", { class: pieClass }, h("div", { style: radialStyle, class: "left-side half-circle" }), h("div", { class: "right-side half-circle" })), h("div", { class: "shadow" })));
+  }
+  else {
+    return (h("div", { class: componentClass }, h("div", { class: "progress-bar-percentage", style: valueStyle }, h("span", { style: labelStyle }, label))));
+  }
+};
+function createIconElement(props) {
+  if (!props.icon) {
+    return undefined;
+  }
+  if (props.icon.indexOf('.') > -1 ||
+    props.icon.indexOf('/') > -1 ||
+    props.icon.indexOf('\\') > -1) {
+    return (h("span", { class: "label kup-icon is-image" }, h("img", { src: props.icon })));
+  }
+  else {
+    let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
+    let iconStyle = {
+      mask: svg,
+      webkitMask: svg,
+    };
+    return h("span", { style: iconStyle, class: "label kup-icon" });
+  }
+}

package/dist/collection/f-components/f-radio/f-radio-declarations.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/f-components/f-radio/f-radio.js

@@ -0,0 +1,28 @@
+import { h } from "@stencil/core";
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+export const FRadio = (props) => {
+  var _a;
+  const hasColumns = !!props.columns;
+  const radioList = [];
+  for (let i = 0; i < ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length); i++) {
+    const data = props.data[i];
+    const classObj = {
+      radio: true,
+      'radio--checked': data.checked ? true : false,
+      'radio--disabled': props.disabled ? true : false,
+    };
+    radioList.push(h("div", { class: `form-field ${props.leadingLabel ? ' form-field--align-end' : ''}` }, h("div", { class: classObj }, h("input", { class: "radio__native-control", type: "radio", name: "radio-element", value: data.value, checked: data.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange
+        ? props.onChange.bind(props.onChange, i)
+        : null, onFocus: props.onFocus }), h("div", { class: "radio__background" }, h("div", { class: "radio__outer-circle" }), h("div", { class: "radio__inner-circle" }))), h("label", { htmlFor: 'radio-element', onClick: props.onChange
+        ? props.onChange.bind(props.onChange, i)
+        : null }, data.label ? data.label : '')));
+  }
+  const styleObj = {
+    '--kup_radio_columns': hasColumns
+      ? `repeat(${props.columns}, 1fr)`
+      : '',
+  };
+  return (h("div", { class: `f-radio radio-wrapper ${hasColumns ? 'radio-wrapper-grid' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}`, style: styleObj }, radioList));
+};

package/dist/collection/f-components/f-rating/f-rating-declarations.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/f-components/f-rating/f-rating.js

@@ -0,0 +1,26 @@
+import { h } from "@stencil/core";
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+export const FRating = (props) => {
+  if (!props.maxValue) {
+    props.maxValue = 5;
+  }
+  return (h("div", { class: `f-rating ${props.disabled ? 'disabled' : ''} ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, buildStars(props)));
+};
+function buildStars(props) {
+  const stars = [];
+  for (let i = 1; i <= props.maxValue; i++) {
+    if (i <= props.value) {
+      stars.push(h("span", { class: "rating", onClick: props.onClick
+          ? props.onClick.bind(props.onClick, i)
+          : null }, "\u2605"));
+    }
+    else {
+      stars.push(h("span", { class: "rating", onClick: props.onClick
+          ? props.onClick.bind(props.onClick, i)
+          : null }, "\u2606"));
+    }
+  }
+  return stars;
+}

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -52,7 +52,8 @@ function setContent(props) {
   let value = props.value;
   let inputType = (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
   let persManageForNumberFormat = false;
-  if (props.inputType === 'number' && props.decimals && props.decimals > 0) {
+  if (props.inputType === 'number' &&
+    ((props.decimals && props.decimals > 0) || props.group)) {
     inputType = 'text';
     persManageForNumberFormat = true;
   }
@@ -90,7 +91,40 @@ function setContent(props) {
           group: props.group,
           integer: props.integers,
         };
-        e.target.value = formatValue(e.target.value, options, true);
+        if (props.min !== undefined &&
+          props.min !== null &&
+          props.min >
+            parseFloat(e.target.value)) {
+          e.target.value =
+            formatValue(props.min.toString(), options, true);
+        }
+        else if (props.max !== undefined &&
+          props.max !== null &&
+          props.max <
+            parseFloat(e.target.value)) {
+          e.target.value =
+            formatValue(props.max.toString(), options, true);
+        }
+        else {
+          e.target.value =
+            formatValue(e.target.value, options, true);
+        }
+      }
+      else {
+        if (props.min !== undefined &&
+          props.min !== null &&
+          props.min >
+            parseFloat(e.target.value)) {
+          e.target.value =
+            props.min.toString();
+        }
+        else if (props.max !== undefined &&
+          props.max !== null &&
+          props.max <
+            parseFloat(e.target.value)) {
+          e.target.value =
+            props.max.toString();
+        }
       }
       if (props.onChange) {
         props.onChange(e);

package/dist/collection/managers/kup-data/kup-data.js

@@ -50,6 +50,8 @@ export class KupData {
               return FCellTypes.GAUGE;
             case FCellShapes.IMAGE:
               return FCellTypes.IMAGE;
+            case FCellShapes.INPUT_CHECKBOX:
+              return FCellTypes.CHECKBOX;
             case FCellShapes.KNOB:
               return FCellTypes.KNOB;
             case FCellShapes.MULTI_AUTOCOMPLETE:

package/dist/collection/managers/kup-math/kup-math.js

@@ -376,7 +376,7 @@ export class KupMath {
    * @param {string} input number as string, formatted by locale US, decimal separator . (like java decimal numbers)
    * @param {number} decimals number of significant decimal digits for output
    * @param {string} type - type of number for calculate suffix
-   * @param {string} decSeparator decimal separator for outpu string
+   * @param {string} decSeparator decimal separator for output string
    * @returns {string} number as string, formatted by actual browser locale (or using decimal separator param), with suffix by type
    **/
   numberStringToFormattedString(input, decimals, type, decSeparator) {

package/dist/collection/managers/kup-theme/kup-theme-declarations.js

@@ -87,6 +87,39 @@ export const fImageUsers = [
  * Components using the FPaginator functional component.
  */
 export const fPaginatorUsers = [KupTagNames.BOX, KupTagNames.DATA_TABLE];
+/**
+ * Components using the FProgressBar functional component.
+ */
+export const fProgressBarUsers = [
+  KupTagNames.BOX,
+  KupTagNames.CELL,
+  KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
+  KupTagNames.PROGRESS_BAR,
+  KupTagNames.TREE,
+];
+/**
+ * Components using the FRadio functional component.
+ */
+export const fRadioUsers = [
+  KupTagNames.BOX,
+  KupTagNames.CELL,
+  KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
+  KupTagNames.RADIO,
+  KupTagNames.TREE,
+];
+/**
+ * Components using the FRating functional component.
+ */
+export const fRatingUsers = [
+  KupTagNames.BOX,
+  KupTagNames.CELL,
+  KupTagNames.DATA_TABLE,
+  KupTagNames.FORM,
+  KupTagNames.RATING,
+  KupTagNames.TREE,
+];
 /**
  * Components using the FSwitch functional component.
  */

package/dist/collection/managers/kup-theme/kup-theme.js

@@ -8,10 +8,13 @@ import * as fCheckboxCSS from "../../f-components/f-checkbox/f-checkbox.css";
 import * as fChipCSS from "../../f-components/f-chip/f-chip.css";
 import * as fImageCSS from "../../f-components/f-image/f-image.css";
 import * as fPaginatorCSS from "../../f-components/f-paginator/f-paginator.css";
+import * as fProgressBarCSS from "../../f-components/f-progress-bar/f-progress-bar.css";
+import * as fRadioCSS from "../../f-components/f-radio/f-radio.css";
+import * as fRatingCSS from "../../f-components/f-rating/f-rating.css";
 import * as fSwitchCSS from "../../f-components/f-switch/f-switch.css";
 import * as fTextFieldCSS from "../../f-components/f-text-field/f-text-field.css";
 import * as rippleCSS from "./mdc-ripple.css";
-import { fButtonUsers, fCellUsers, fCheckboxUsers, fChipUsers, fImageUsers, fPaginatorUsers, fSwitchUsers, fTextFieldUsers, masterCustomStyle, rippleUsers, } from "./kup-theme-declarations";
+import { fButtonUsers, fCellUsers, fCheckboxUsers, fChipUsers, fImageUsers, fPaginatorUsers, fProgressBarUsers, fRadioUsers, fRatingUsers, fSwitchUsers, fTextFieldUsers, masterCustomStyle, rippleUsers, } from "./kup-theme-declarations";
 import { KupDebugCategory } from "../kup-debug/kup-debug-declarations";
 const dom = document.documentElement;
 /**
@@ -219,6 +222,15 @@ export class KupTheme {
       if (fPaginatorUsers.includes(tagName)) {
         completeStyle += fPaginatorCSS['default'];
       }
+      if (fProgressBarUsers.includes(tagName)) {
+        completeStyle += fProgressBarCSS['default'];
+      }
+      if (fRadioUsers.includes(tagName)) {
+        completeStyle += fRadioCSS['default'];
+      }
+      if (fRatingUsers.includes(tagName)) {
+        completeStyle += fRatingCSS['default'];
+      }
       if (fSwitchUsers.includes(tagName)) {
         completeStyle += fSwitchCSS['default'];
       }

package/dist/collection/types/GenericTypes.js

@@ -11,14 +11,13 @@ export var KupTagNames;
   KupTagNames["BUTTON_LIST"] = "KUP-BUTTON-LIST";
   KupTagNames["CALENDAR"] = "KUP-CALENDAR";
   KupTagNames["CARD"] = "KUP-CARD";
+  KupTagNames["CARD_LIST"] = "KUP-CARD-LIST";
   KupTagNames["CELL"] = "KUP-CELL";
   KupTagNames["CHART"] = "KUP-CHART";
   KupTagNames["CHECKBOX"] = "KUP-CHECKBOX";
   KupTagNames["CHIP"] = "KUP-CHIP";
   KupTagNames["COLOR_PICKER"] = "KUP-COLOR-PICKER";
   KupTagNames["COMBOBOX"] = "KUP-COMBOBOX";
-  KupTagNames["DASH"] = "KUP-DASH";
-  KupTagNames["DASH_LIST"] = "KUP-DASH-LIST";
   KupTagNames["DASHBOARD"] = "KUP-DASHBOARD";
   KupTagNames["DATA_TABLE"] = "KUP-DATA-TABLE";
   KupTagNames["DATE_PICKER"] = "KUP-DATE-PICKER";

package/dist/collection/utils/cell-utils.js

@@ -105,13 +105,12 @@ export function compareValues(obj1, value1, obj2, value2, sortMode) {
     v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, KupDatesFormats.ISO_DATE));
   }
   else if (dom.ketchup.objects.isTime(obj1)) {
-    let manageSeconds = dom.ketchup.objects.isTimeWithSeconds(obj1);
-    v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, manageSeconds
-      ? KupDatesFormats.ISO_TIME
-      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
-    v2 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s2, manageSeconds
-      ? KupDatesFormats.ISO_TIME
-      : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS));
+    // Previous code could not work because dayjs
+    // returns an invalid date when it tries to parse a time
+    // This solution is simpler and it works because the time format
+    // was assumed to be equals to HH:mm:ss or HH:mm
+    v1 = Number(s1.replace(/:/g, ''));
+    v2 = Number(s2.replace(/:/g, ''));
   }
   else if (dom.ketchup.objects.isTimestamp(obj1)) {
     v1 = dom.ketchup.dates.toDate(dom.ketchup.dates.format(s1, KupDatesFormats.ISO_DATE_TIME));

package/dist/components/index.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
 /**
  * Used to manually set the base path where assets can be found.
  * If the script is used as "module", it's recommended to use "import.meta.url",

package/dist/components/index.js

@@ -1 +1 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/components/kup-accordion.js

@@ -212,6 +212,8 @@ const KupAccordion$1 = /*@__PURE__*/ proxyCustomElement(class KupAccordion exten
     "refresh": [64],
     "setProps": [64],
     "toggleItem": [64]
+  }, undefined, {
+    "ripple": ["applyRipple"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {