@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -3,86 +3,86 @@ 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';
+    if (!props.centeredLabel && !props.centeredLabel !== false) {
+        props.centeredLabel = true;
     }
-  }
-  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);
+    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 {
-          label = (h("span", { class: "label" }, props.value, h("span", { class: "smaller" }, "%")));
+    }
+    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 + '%';
+                }
+            }
         }
-      }
-      else {
-        if (props.label) {
-          label = props.label;
+    }
+    if (props.value > 0) {
+        pieClass += ' has-value';
+        if (props.value > 50) {
+            pieClass += ' is-more-than-half';
         }
         else {
-          label = props.value + '%';
+            pieClass += ' is-less-than-half';
         }
-      }
     }
-  }
-  if (props.value > 0) {
-    pieClass += ' has-value';
-    if (props.value > 50) {
-      pieClass += ' is-more-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 {
-      pieClass += ' is-less-than-half';
+        return (h("div", { class: componentClass }, h("div", { class: "progress-bar-percentage", style: valueStyle }, h("span", { style: labelStyle }, label))));
     }
-  }
-  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" });
-  }
+    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.js

@@ -3,26 +3,26 @@ 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,
+    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)`
+            : '',
     };
-    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));
+    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.js

@@ -3,24 +3,24 @@ 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)));
+    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"));
+    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;
+    return stars;
 }

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

@@ -3,10 +3,10 @@ import { h } from "@stencil/core";
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FSwitch = (props) => {
-  const classObj = {
-    switch: true,
-    'switch--checked': props.checked,
-    'switch--disabled': props.disabled,
-  };
-  return (h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` }, h("div", { class: "switch__track" }), h("div", { class: "switch__thumb-underlay" }, h("div", { class: "switch__thumb" }, h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))), h("label", { onClick: props.onChange }, props.label))));
+    const classObj = {
+        switch: true,
+        'switch--checked': props.checked,
+        'switch--disabled': props.disabled,
+    };
+    return (h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` }, h("div", { class: "switch__track" }), h("div", { class: "switch__thumb-underlay" }, h("div", { class: "switch__thumb" }, h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))), h("label", { onClick: props.onChange }, props.label))));
 };

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

@@ -6,24 +6,24 @@ import { MDCFormField } from "@material/form-field";
  * @see https://material-components.github.io/material-components-web-catalog/#/component/text-field
  */
 export function FTextFieldMDC(el) {
-  const component = new MDCTextField(el.querySelector('.mdc-text-field'));
-  const form = el.querySelector('.mdc-form-field');
-  const helper = el.querySelector('.mdc-text-field-helper-text');
-  const counter = el.querySelector('.mdc-text-field-character-counter');
-  const icon = el.querySelector('.mdc-text-field-icon');
-  if (form) {
-    const formField = MDCFormField.attachTo(form);
-    if (formField) {
-      formField.input = component;
+    const component = new MDCTextField(el.querySelector('.mdc-text-field'));
+    const form = el.querySelector('.mdc-form-field');
+    const helper = el.querySelector('.mdc-text-field-helper-text');
+    const counter = el.querySelector('.mdc-text-field-character-counter');
+    const icon = el.querySelector('.mdc-text-field-icon');
+    if (form) {
+        const formField = MDCFormField.attachTo(form);
+        if (formField) {
+            formField.input = component;
+        }
+    }
+    if (helper) {
+        new MDCTextFieldHelperText(helper);
+    }
+    if (counter) {
+        new MDCTextFieldCharacterCounter(counter);
+    }
+    if (icon) {
+        new MDCTextFieldIcon(icon);
     }
-  }
-  if (helper) {
-    new MDCTextFieldHelperText(helper);
-  }
-  if (counter) {
-    new MDCTextFieldCharacterCounter(counter);
-  }
-  if (icon) {
-    new MDCTextFieldIcon(icon);
-  }
 }