@sme.up/ketchup 9.0.0 → 9.2.0

package/dist/collection/components/kup-progress-bar/kup-progress-bar.css

@@ -11,247 +11,6 @@
 * @prop --kup-progressbar-width: Sets width of the component.
 */
 :host {
-  --kup_progressbar_border_radius: var(--kup-progressbar-border-radius, 4px);
-  --kup_progressbar_font_family: var(
-    --kup-progressbar-font-family,
-    var(--kup-font-family)
-  );
-  --kup_progressbar_font_size: var(
-    --kup-progressbar-font-size,
-    var(--kup-font-size)
-  );
-  --kup_progressbar_height: var(--kup-progressbar-height, 1.25em);
-  --kup_progressbar_primary_color: var(
-    --kup-progressbar-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_progressbar_text_color: var(
-    --kup-progressbar-text-color,
-    var(--kup-text-color)
-  );
-  --kup_progressbar_text_color_rgb: var(
-    --kup-progressbar-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  --kup_progressbar_text_on_primary_color: var(
-    --kup-progressbar-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup_progressbar_track_color: var(
-    --kup-progressbar-track-color,
-    var(--kup-disabled-background-color)
-  );
-  --kup_progressbar_width: var(--kup-progressbar-width, 100%);
   display: block;
-  font-family: var(--kup_progressbar_font_family);
-  font-size: var(--kup_progressbar_font_size);
-  width: var(--kup_progressbar_width);
-}
-
-.progress-bar {
-  background: var(--kup_progressbar_track_color);
-  border-radius: var(--kup_progressbar_border_radius);
-  overflow: hidden;
-  position: relative;
-  width: var(--kup_progressbar_width);
-}
-.progress-bar.text-color-on-primary .progress-bar-percentage {
-  color: var(--kup_progressbar_text_on_primary_color);
-}
-.progress-bar.text-color-on-primary .progress-bar-percentage span {
-  color: var(--kup_progressbar_text_on_primary_color);
-}
-
-.progress-bar-percentage {
-  background: var(--kup_progressbar_primary_color);
-  border-radius: var(--kup_progressbar_border_radius);
-  color: var(--kup_progressbar_text_color);
-  height: var(--kup_progressbar_height);
-  padding: 0.5em 0;
-  text-align: center;
-  transition: width 0.2s ease;
-}
-.progress-bar-percentage span {
-  color: var(--kup_progressbar_text_color);
-  display: inline-block;
-  font-size: 1em;
-  left: 0;
-  line-height: var(--kup_progressbar_height);
-  position: absolute;
-  width: var(--kup_progressbar_width);
-}
-.progress-bar-percentage .kup-icon {
-  display: block;
-  height: var(--kup_progressbar_height);
-}
-.progress-bar-percentage .kup-icon:not(.is-image) {
-  background-color: var(--kup_progressbar_text_on_primary_color);
-}
-.progress-bar-percentage .kup-icon img {
-  width: auto;
-  height: 100%;
-}
-
-:host([is-radial]) {
-  box-sizing: border-box;
-  margin: auto;
-  padding: 1.25em 0px;
-}
-:host([is-radial]) #kup-component {
-  display: flex;
-  font-size: 10em;
-  margin: auto;
-}
-:host([is-radial]) .pie-wrapper {
-  height: 1em;
-  width: 1em;
-  float: left;
-  margin: auto;
-  position: relative;
-}
-:host([is-radial]) .pie-wrapper:nth-child(3n+1) {
-  clear: both;
-}
-:host([is-radial]) .pie-wrapper .pie {
-  height: 1em;
-  width: 1em;
-  clip: rect(0, 1em, 1em, 0.5em);
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value .half-circle {
-  border-color: var(--kup_progressbar_primary_color);
-}
-:host([is-radial]) .pie-wrapper .pie.has-value .half-circle.left-side {
-  transition: transform 0.2s ease;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-less-than-half .right-side {
-  display: none;
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-more-than-half {
-  clip: rect(auto, auto, auto, auto);
-}
-:host([is-radial]) .pie-wrapper .pie.has-value.is-more-than-half .right-side {
-  transform: rotate(180deg);
-}
-:host([is-radial]) .pie-wrapper .pie .half-circle {
-  height: 1em;
-  width: 1em;
-  border: 0.1em solid var(--kup_progressbar_track_color);
-  border-radius: 50%;
-  clip: rect(0, 0.5em, 1em, 0);
-  left: 0;
-  position: absolute;
-  top: 0;
-}
-:host([is-radial]) .pie-wrapper .label {
-  background: none;
-  bottom: 0.4em;
-  color: var(--kup_progressbar_text_color);
-  cursor: default;
-  display: block;
-  font-size: 0.25em;
-  left: 0.4em;
-  line-height: 2.75em;
-  position: absolute;
-  right: 0.4em;
-  text-align: center;
-  top: 0.4em;
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon {
-  display: block;
-  height: 1.25em;
-  width: 1.25em;
-  object-fit: cover;
-  margin: auto;
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon:not(.is-image) {
-  background-color: var(--kup_progressbar_primary_color);
-}
-:host([is-radial]) .pie-wrapper .label.kup-icon img {
-  width: auto;
-  height: 100%;
-}
-:host([is-radial]) .pie-wrapper .label .smaller {
-  color: var(--kup_progressbar_text_color);
-  opacity: 0.8;
-  font-size: 0.45em;
-  padding-bottom: 20px;
-  vertical-align: super;
-}
-:host([is-radial]) .pie-wrapper .shadow {
-  height: 1em;
-  width: 1em;
-  border: 0.1em solid var(--kup_progressbar_track_color);
-  border-radius: 50%;
-}
-:host([is-radial]) *,
-:host([is-radial]) *:before,
-:host([is-radial]) *:after {
-  box-sizing: border-box;
-}
-
-@keyframes running-stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 3em 3em;
-  }
-}
-/*-------------------------------------------------*/
-/*        C o m p o n e n t   C l a s s e s        */
-/*-------------------------------------------------*/
-:host(.kup-animated) .progress-bar-percentage {
-  animation: running-stripes 2s linear infinite;
-}
-
-:host(.kup-padded) .progress-bar {
-  padding: 0.5em;
-  width: calc(100% - 1em);
-}
-
-:host(.kup-slim) #kup-component .progress-bar {
-  border-radius: 9px;
-}
-:host(.kup-slim) #kup-component .progress-bar .progress-bar-percentage {
-  border-radius: 9px;
-  padding: 0;
-}
-:host(.kup-slim) #kup-component .pie-wrapper .pie .half-circle {
-  border-width: 0.05em;
-}
-:host(.kup-slim) #kup-component .pie-wrapper .shadow {
-  border-width: 0.05em;
-}
-
-:host(.kup-striped) .progress-bar-percentage {
-  background-image: linear-gradient(-45deg, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 25%, transparent 25%, transparent 50%, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 50%, rgba(var(--kup_progressbar_text_color_rgb), 0.125) 75%, transparent 75%, transparent);
-  background-size: 3em 3em;
-}
-
-:host(.kup-danger) {
-  --kup-progressbar-primary-color: var(--kup-danger-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-info) {
-  --kup-progressbar-primary-color: var(--kup-info-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-secondary) {
-  --kup-progressbar-primary-color: var(--kup-secondary-color);
-  --kup-progressbar-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-
-:host(.kup-success) {
-  --kup-progressbar-primary-color: var(--kup-success-color);
-  --kup-progressbar-text-on-primary-color: white;
-}
-
-:host(.kup-warning) {
-  --kup-progressbar-primary-color: var(--kup-warning-color);
-  --kup-progressbar-text-on-primary-color: white;
+  width: var(--kup-progressbar-width, 100%);
 }

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

@@ -1,8 +1,9 @@
-import { forceUpdate, getAssetPath, h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, } from "@stencil/core";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 import { KupProgressBarProps } from "./kup-progress-bar-declarations";
+import { FProgressBar } from "../../f-components/f-progress-bar/f-progress-bar";
 export class KupProgressBar {
   constructor() {
     /*-------------------------------------------------*/
@@ -45,27 +46,6 @@ export class KupProgressBar {
     setProps(this, KupProgressBarProps, props);
   }
   /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  createIconElement() {
-    if (!this.icon) {
-      return undefined;
-    }
-    if (this.icon.indexOf('.') > -1 ||
-      this.icon.indexOf('/') > -1 ||
-      this.icon.indexOf('\\') > -1) {
-      return (h("span", { class: "label kup-icon is-image" }, h("img", { src: this.icon })));
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${this.icon}.svg`)}') no-repeat center`;
-      let iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-      return h("span", { style: iconStyle, class: "label kup-icon" });
-    }
-  }
-  /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
@@ -87,69 +67,42 @@ export class KupProgressBar {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let componentClass = '';
-    let pieClass = 'pie';
-    let radialStyle = undefined;
-    if (this.isRadial) {
-      componentClass = 'pie-wrapper';
-    }
-    else {
-      componentClass = 'progress-bar';
-    }
-    let labelStyle = undefined;
-    const valueStyle = {
-      width: `${this.value}%`,
+    const props = {
+      animated: this.rootElement.classList.contains('kup-animated')
+        ? true
+        : false,
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      centeredLabel: this.centeredLabel,
+      hideLabel: this.hideLabel,
+      icon: this.icon,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      isRadial: this.isRadial,
+      label: this.label,
+      padded: this.rootElement.classList.contains('kup-padded')
+        ? true
+        : false,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      slim: this.rootElement.classList.contains('kup-slim')
+        ? true
+        : false,
+      striped: this.rootElement.classList.contains('kup-striped')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      value: this.value,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
     };
-    if (!this.centeredLabel) {
-      labelStyle = valueStyle;
-      if (this.value > 2) {
-        componentClass += ' text-color-on-primary';
-      }
-    }
-    else if (this.value > 49) {
-      componentClass += ' text-color-on-primary';
-    }
-    let label = null;
-    if (this.icon) {
-      label = this.createIconElement();
-    }
-    else {
-      if (!this.hideLabel) {
-        if (this.isRadial) {
-          if (this.label) {
-            label = h("span", { class: "label" }, this.label);
-          }
-          else {
-            label = (h("span", { class: "label" }, this.value, h("span", { class: "smaller" }, "%")));
-          }
-        }
-        else {
-          if (this.label) {
-            label = this.label;
-          }
-          else {
-            label = this.value + '%';
-          }
-        }
-      }
-    }
-    if (this.value > 0) {
-      pieClass += ' has-value';
-      if (this.value > 50) {
-        pieClass += ' is-more-than-half';
-      }
-      else {
-        pieClass += ' is-less-than-half';
-      }
-    }
-    let el;
-    if (this.isRadial) {
-      el = (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 {
-      el = (h("div", { class: componentClass }, h("div", { class: "progress-bar-percentage", style: valueStyle }, h("span", { style: labelStyle }, label))));
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, el)));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FProgressBar, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/collection/components/kup-radio/kup-radio.css

@@ -8,166 +8,5 @@
 * @prop --kup-radio-text-color: Sets text color of the radio's label.
 */
 :host {
-  --kup_radio_font_family: var(--kup-radio-font-family, var(--kup-font-family));
-  --kup_radio_font_size: var(--kup-radio-font-size, var(--kup-font-size));
-  --kup_radio_font_weight: var(--kup-radio-font-weight, 400);
-  --kup_radio_outer_circle_color: var(
-    --kup-radio-outer-circle-color,
-    rgba(var(--kup-text-color-rgb), 0.5)
-  );
-  --kup_radio_primary_color: var(
-    --kup-radio-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_radio_primary_color_rgb: var(
-    --kup-radio-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-color));
   display: block;
-  font-family: var(--kup_radio_font_family);
-  font-size: var(--kup_radio_font_size);
-}
-
-.form-field {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.875em;
-  line-height: 2em;
-  font-weight: var(--kup_radio_font_weight);
-  letter-spacing: 0.0178571429em;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.form-field label {
-  color: var(--kup_radio_text_color);
-  margin-left: 0px;
-  margin-right: auto;
-  padding-left: 4px;
-  padding-right: 0px;
-  order: 0;
-}
-.form-field.form-field--align-end label {
-  margin-left: auto;
-  margin-right: 0px;
-  padding-left: 0px;
-  padding-right: 4px;
-  order: -1 !important;
-}
-
-.radio-wrapper.radio-wrapper--grid {
-  display: grid;
-  grid-gap: 1em;
-  grid-template-columns: var(--kup_radio_columns);
-}
-.radio-wrapper .radio {
-  border-radius: 50%;
-  padding: 10px;
-  position: relative;
-  flex: 0 0 auto;
-  box-sizing: content-box;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  will-change: opacity, transform, border-color, color;
-  will-change: transform, opacity;
-}
-.radio-wrapper .radio:hover {
-  background-color: rgba(var(--kup_radio_primary_color_rgb), 0.125);
-}
-.radio-wrapper .radio .radio__native-control {
-  position: absolute;
-  margin: 0px;
-  padding: 0px;
-  opacity: 0;
-  cursor: inherit;
-  z-index: 1;
-  top: 0px;
-  right: 0px;
-  left: 0px;
-  width: 40px;
-  height: 40px;
-}
-.radio-wrapper .radio .radio__background {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio .radio__background .radio__inner-circle {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  transform: scale(0, 0);
-  border-width: 10px;
-  border-style: solid;
-  border-radius: 50%;
-  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-}
-.radio-wrapper .radio.radio--checked .radio__outer-circle {
-  border-color: var(--kup_radio_primary_color);
-}
-.radio-wrapper .radio.radio--checked .radio__inner-circle {
-  border-color: var(--kup_radio_primary_color);
-  transform: scale(0.5);
-  transition: transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms, border-color 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-}
-.radio-wrapper .radio.radio--disabled {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled + label {
-  pointer-events: none;
-}
-.radio-wrapper .radio.radio--disabled .radio__outer-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-.radio-wrapper .radio.radio--disabled .radio__inner-circle {
-  border-color: var(--kup_radio_outer_circle_color);
-}
-
-/*-------------------------------------------------*/
-/*        C o m p o n e n t   C l a s s e s        */
-/*-------------------------------------------------*/
-:host(.kup-danger) {
-  --kup-radio-primary-color: var(--kup-danger-color);
-  --kup-radio-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-
-:host(.kup-info) {
-  --kup-radio-primary-color: var(--kup-info-color);
-  --kup-radio-primary-color-rgb: var(--kup-info-color-rgb);
-}
-
-:host(.kup-secondary) {
-  --kup-radio-primary-color: var(--kup-secondary-color);
-  --kup-radio-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-
-:host(.kup-success) {
-  --kup-radio-primary-color: var(--kup-success-color);
-  --kup-radio-primary-color-rgb: var(--kup-success-color-rgb);
-}
-
-:host(.kup-warning) {
-  --kup-radio-primary-color: var(--kup-warning-color);
-  --kup-radio-primary-color-rgb: var(--kup-warning-color-rgb);
 }

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

@@ -3,6 +3,7 @@ import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
 import { KupRadioProps, } from "./kup-radio-declarations";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
+import { FRadio } from "../../f-components/f-radio/f-radio";
 export class KupRadio {
   constructor() {
     /*-------------------------------------------------*/
@@ -41,6 +42,7 @@ export class KupRadio {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.refresh();
   }
   onKupFocus() {
     this.kupFocus.emit({
@@ -92,28 +94,31 @@ export class KupRadio {
     if (!this.data || this.data.length === 0) {
       return;
     }
-    const hasColumns = !!this.columns;
-    const radioList = [];
-    for (let i = 0; i < this.data.length; i++) {
-      const data = this.data[i];
-      const classObj = {
-        radio: true,
-        'radio--checked': data.checked ? true : false,
-        'radio--disabled': this.disabled ? true : false,
-      };
-      const radioEl = (h("div", { class: `form-field ${this.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: this.disabled, onBlur: () => this.onKupBlur(), onChange: () => this.onKupChange(i), onFocus: () => this.onKupFocus() }), h("div", { class: "radio__background" }, h("div", { class: "radio__outer-circle" }), h("div", { class: "radio__inner-circle" }))), h("label", { htmlFor: 'radio-element', onClick: () => this.onKupChange(i) }, data.label ? data.label : '')));
-      radioList.push(radioEl);
-    }
-    const hostStyle = {
-      '--kup_radio_columns': hasColumns
-        ? `repeat(${this.columns}, 1fr)`
-        : '',
-    };
-    const classObj = {
-      'radio-wrapper': true,
-      'radio-wrapper--grid': hasColumns ? true : false,
+    const props = {
+      columns: this.columns,
+      danger: this.rootElement.classList.contains('kup-danger')
+        ? true
+        : false,
+      data: this.data,
+      disabled: this.disabled,
+      info: this.rootElement.classList.contains('kup-info')
+        ? true
+        : false,
+      leadingLabel: this.leadingLabel,
+      secondary: this.rootElement.classList.contains('kup-secondary')
+        ? true
+        : false,
+      success: this.rootElement.classList.contains('kup-success')
+        ? true
+        : false,
+      warning: this.rootElement.classList.contains('kup-warning')
+        ? true
+        : false,
+      onBlur: () => this.onKupBlur(),
+      onChange: (i) => this.onKupChange(i),
+      onFocus: () => this.onKupFocus(),
     };
-    return (h(Host, { style: hostStyle }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: classObj }, radioList))));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FRadio, Object.assign({}, props)))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -181,13 +186,13 @@ export class KupRadio {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "KupRadioData[]",
-          "resolved": "KupRadioData[]",
+          "original": "FRadioData[]",
+          "resolved": "FRadioData[]",
           "references": {
-            "KupRadioData": {
+            "FRadioData": {
               "location": "import",
-              "path": "./kup-radio-declarations",
-              "id": "src/components/kup-radio/kup-radio-declarations.ts::KupRadioData"
+              "path": "../../f-components/f-radio/f-radio-declarations",
+              "id": "src/f-components/f-radio/f-radio-declarations.ts::FRadioData"
             }
           }
         },

package/dist/collection/components/kup-rating/kup-rating.css

@@ -3,13 +3,5 @@
 * @prop --kup-rating-font-size: Sets font size of the component.
 */
 :host {
-  --kup_rating_color: var(--kup-rating-color, orange);
-  --kup_rating_font_size: var(--kup-rating-font-size, 30px);
   display: block;
-}
-
-.rating {
-  color: var(--kup_rating_color);
-  cursor: pointer;
-  font-size: var(--kup_rating_font_size);
 }