@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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."
           }],

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

@@ -1,217 +1,3 @@
-.f-checkbox--wrapper {
-  --kup_checkbox_font_family: var(
-    --kup-checkbox-font-family,
-    var(--kup-font-family)
-  );
-  --kup_checkbox_font_size: var(--kup-checkbox-font-size, var(--kup-font-size));
-  --kup_checkbox_font_weight: var(--kup-checkbox-font-weight, 400);
-  --kup_checkbox_disabled_checkmark_color: var(
-    --kup-checkbox-disabled-checkmark-color,
-    var(--kup-background-color)
-  );
-  --kup_checkbox_padding: var(--kup-checkbox-padding, 11px);
-  --kup_checkbox_primary_color: var(
-    --kup-checkbox-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_checkbox_primary_color_rgb: var(
-    --kup-checkbox-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_checkbox_text_color: var(
-    --kup-checkbox-text-color,
-    var(--kup-text-color)
-  );
-  --kup_checkbox_text_color_rgb: var(
-    --kup-checkbox-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  --kup_checkbox_text_on_primary_color: var(
-    --kup-checkbox-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup_checkbox_text_on_primary_color_rgb: var(
-    --kup-checkbox-text-on-primary-color-rgb,
-    var(--kup-text-on-primary-color-rgb)
-  );
-  font-family: var(--kup_checkbox_font_family);
-  font-size: var(--kup_checkbox_font_size);
-}
-.f-checkbox--wrapper .form-field {
-  color: var(--kup_checkbox_text_color);
-  line-height: 1.25em;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: 0.0178571429em;
-  text-decoration: inherit;
-  align-items: center;
-  vertical-align: middle;
-  display: inline-flex;
-}
-.f-checkbox--wrapper .form-field label {
-  font-size: 0.875em;
-  margin-left: 0px;
-  margin-right: auto;
-  order: 0;
-}
-.f-checkbox--wrapper .form-field.form-field--align-end label {
-  margin-left: auto;
-  margin-right: 0px;
-  order: -1;
-}
-.f-checkbox--wrapper .checkbox {
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  flex: 0 0 18px;
-  box-sizing: content-box;
-  width: 18px;
-  height: 18px;
-  line-height: 0;
-  white-space: nowrap;
-  cursor: pointer;
-  vertical-align: bottom;
-  will-change: transform, opacity;
-  z-index: 0;
-  padding: var(--kup_checkbox_padding);
-  transition: background-color 125ms linear;
-}
-.f-checkbox--wrapper .checkbox:hover {
-  background: rgba(var(--kup_checkbox_primary_color_rgb), 0.125);
-}
-.f-checkbox--wrapper .checkbox .checkbox__native-control {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  cursor: inherit;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  width: 40px;
-}
-.f-checkbox--wrapper .checkbox .checkbox__native-control:checked ~ .checkbox__background .checkbox__checkmark {
-  transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox .checkbox__checkmark-path {
-  stroke: var(--kup_checkbox_text_on_primary_color);
-  stroke-dasharray: 29.7833385;
-  stroke-dashoffset: 29.7833385;
-  stroke-width: 3.12px;
-  transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background {
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(var(--kup_checkbox_text_color_rgb), 0.5);
-  border-radius: 2px;
-  background-color: transparent;
-  pointer-events: none;
-  will-change: background-color, border-color;
-  transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background .checkbox__checkmark {
-  color: var(--kup_checkbox_text_on_primary_color);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  opacity: 0;
-  transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background .checkbox__mixedmark {
-  position: absolute;
-  top: 6px;
-  left: -1px;
-  color: var(--kup_checkbox_text_on_primary_color);
-  width: 100%;
-  height: 0;
-  border-width: 1px;
-  border-style: solid;
-  opacity: 0;
-  transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox.checkbox--checked .checkbox__background {
-  background-color: var(--kup_checkbox_primary_color);
-  border-color: var(--kup_checkbox_primary_color);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox.checkbox--checked .checkbox__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__background {
-  background-color: var(--kup_checkbox_primary_color);
-  border-color: var(--kup_checkbox_primary_color);
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__mixedmark {
-  border-color: var(--kup_checkbox_text_on_primary_color);
-  transform: scaleX(1) rotate(0deg);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled {
-  pointer-events: none;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled + label {
-  pointer-events: none;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled .checkbox__background {
-  background-color: transparent;
-  border-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325);
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__background {
-  background-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325);
-  border-color: transparent;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__checkmark {
-  color: var(--kup_checkbox_disabled_checkmark_color);
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__mixedmark {
-  color: var(--kup_checkbox_disabled_checkmark_color);
-}
-.f-checkbox--wrapper.kup-danger {
-  --kup-checkbox-primary-color: var(--kup-danger-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-info {
-  --kup-checkbox-primary-color: var(--kup-info-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-secondary {
-  --kup-checkbox-primary-color: var(--kup-secondary-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-checkbox-text-on-primary-color: var(--kup-text-on-secondary-color);
-  --kup-checkbox-text-on-primary-color-rgb: var(
-    --kup-text-on-secondary-color-rgb
-  );
-}
-.f-checkbox--wrapper.kup-success {
-  --kup-checkbox-primary-color: var(--kup-success-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-warning {
-  --kup-checkbox-primary-color: var(--kup-warning-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-
 /**
 * NOTE: These variables are used in the related f-component.
 *

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

@@ -165,9 +165,8 @@ export class KupCheckbox {
       onChange: () => this.onKupChange(),
       onFocus: () => this.onKupFocus(),
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
         h(FCheckbox, Object.assign({}, props)))));
   }
@@ -195,8 +194,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component will be set to 'checked'."
       },
@@ -216,11 +215,11 @@ export class KupCheckbox {
       "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."
       },
@@ -240,8 +239,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component is disabled."
       },
@@ -261,8 +260,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component will be set to 'indeterminate'."
       },
@@ -282,8 +281,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When specified, its content will be shown as a label."
       },
@@ -303,8 +302,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the label will be on the left of the component."
       },
@@ -383,8 +382,8 @@ export class KupCheckbox {
         "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."
           }],
@@ -431,8 +430,8 @@ export class KupCheckbox {
         "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."
           }],