@sme.up/ketchup 4.0.0 → 4.2.0

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

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

@@ -1,220 +1,3 @@
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
-.f-chip--wrapper {
-  --kup_chip_background_color: var(
-    --kup-chip-background-color,
-    var(--kup-background-color)
-  );
-  --kup_chip_border_radius: var(--kup-chip-border-radius, 16px);
-  --kup_chip_font_family: var(--kup-chip-font-family, var(--kup-font-family));
-  --kup_chip_font_size: var(--kup-chip-font-size, var(--kup-font-size));
-  --kup_chip_font_weight: var(--kup-chip-font-weight, var(--kup-font-weight));
-  --kup_chip_height: var(--kup-chip-height, 32px);
-  --kup_chip_margin: var(--kup-chip-margin, 0 4px);
-  --kup_chip_padding: var(--kup-chip-padding, 0 12px);
-  --kup_chip_primary_color: var(
-    --kup-chip-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_chip_primary_color_rgb: var(
-    --kup-chip-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_chip_text_color: var(--kup-chip-text-color, var(--kup-text-color));
-  --kup_chip_text_color_rgb: var(
-    --kup-chip-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  font-family: var(--kup_chip_font_family);
-  font-size: var(--kup_chip_font_size);
-}
-.f-chip--wrapper .chip-set {
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-}
-.f-chip--wrapper .chip-set .chip {
-  align-items: center;
-  display: inline-flex;
-  position: relative;
-  background-color: var(--kup_chip_background_color);
-  background-image: linear-gradient(to right, rgba(var(--kup_chip_text_color_rgb), 0.1) 0%, rgba(var(--kup_chip_text_color_rgb), 0.1) 0.1%, rgba(var(--kup_chip_text_color_rgb), 0.1));
-  color: var(--kup_chip_text_color);
-  border-radius: var(--kup_chip_border_radius);
-  font-size: 0.875em;
-  font-weight: var(--kup_chip_font_weight);
-  letter-spacing: 0.0178571429em;
-  text-decoration: inherit;
-  text-transform: inherit;
-  height: var(--kup_chip_height);
-  box-sizing: border-box;
-  padding: var(--kup_chip_padding);
-  border-width: 0;
-  outline: none;
-  cursor: pointer;
-  will-change: transform, opacity;
-  margin: var(--kup_chip_margin);
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading {
-  color: var(--kup_chip_text_color);
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading:not(.chip__icon--leading-hidden) {
-  margin-left: -4px;
-  margin-right: 6px;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon--leading .chip__icon--trailing {
-  position: relative;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon {
-  border-radius: 50%;
-  outline: none;
-  vertical-align: middle;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon .chip_icon--leading:not(.chip__icon--leading-hidden) {
-  width: 20px;
-  height: 20px;
-  font-size: 20px;
-}
-.f-chip--wrapper .chip-set .chip .chip__icon .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-chip--wrapper .chip-set .chip .chip__checkmark-svg {
-  width: 0;
-  height: 20px;
-  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.f-chip--wrapper .chip-set .chip .chip__checkmark-path {
-  transition: stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
-  stroke-width: 2px;
-  stroke-dashoffset: 29.7833385;
-  stroke-dasharray: 29.7833385;
-}
-.f-chip--wrapper .chip-set .chip svg path {
-  color: var(--kup_chip_text_color);
-  stroke: var(--kup_chip_text_color);
-}
-.f-chip--wrapper .chip-set .chip .kup-icon {
-  background: var(--kup_chip_text_color);
-  display: block;
-  width: 18px;
-  height: 18px;
-}
-.f-chip--wrapper .chip-set .chip .chip__primary-action {
-  outline: none;
-}
-.f-chip--wrapper .chip-set .chip .chip__primary-action .chip__text {
-  white-space: nowrap;
-}
-.f-chip--wrapper .chip-set.chip-set--choice .chip--selected {
-  background-color: var(--kup_chip_background_color);
-  background-image: linear-gradient(to right, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0%, rgba(var(--kup_chip_primary_color_rgb), 0.25) 0.1%, rgba(var(--kup_chip_primary_color_rgb), 0.25));
-  color: var(--kup_chip_primary_color);
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading {
-  opacity: 1;
-  transition: opacity 75ms linear;
-  transition-delay: -50ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading + .chip__checkmark {
-  opacity: 0;
-  transition: opacity 75ms linear;
-  transition-delay: 80ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading + .chip__checkmark .chip__checkmark-svg {
-  transition: width 0ms;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden {
-  display: none;
-  width: 0;
-  opacity: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip__icon--leading.chip__icon--leading-hidden + .chip__checkmark {
-  height: 20px;
-  width: 20px;
-  opacity: 1;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__icon--leading {
-  opacity: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark {
-  margin-left: -4px;
-  margin-right: 4px;
-}
-.f-chip--wrapper .chip-set.chip-set--filter .chip--selected .chip__checkmark .chip__checkmark-svg {
-  height: 20px;
-  width: 20px;
-}
-.f-chip--wrapper .chip-set.chip-set--input .kup-clear-icon {
-  margin-left: 4px;
-  margin-right: -4px;
-}
-.f-chip--wrapper .chip-set.chip-set--input .kup-clear-icon:hover {
-  opacity: 0.75;
-}
-.f-chip--wrapper :not(svg) {
-  transform-origin: 0px 0px;
-}
-.f-chip--wrapper.kup-danger {
-  --kup-chip-primary-color: var(--kup-danger-color);
-  --kup-chip-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-.f-chip--wrapper.kup-info {
-  --kup-chip-primary-color: var(--kup-info-color);
-  --kup-chip-primary-color-rgb: var(--kup-info-color-rgb);
-}
-.f-chip--wrapper.kup-secondary {
-  --kup-chip-primary-color: var(--kup-secondary-color);
-  --kup-chip-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-.f-chip--wrapper.kup-success {
-  --kup-chip-primary-color: var(--kup-success-color);
-  --kup-chip-primary-color-rgb: var(--kup-success-color-rgb);
-}
-.f-chip--wrapper.kup-warning {
-  --kup-chip-primary-color: var(--kup-warning-color);
-  --kup-chip-primary-color-rgb: var(--kup-warning-color-rgb);
-}
-.f-chip--wrapper .kup-icon.kup-clear-icon {
-  -webkit-mask: var(--kup-clear-icon);
-  mask: var(--kup-clear-icon);
-}
-
 /**
 * NOTE: These variables are used in the related f-component.
 *

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

@@ -207,9 +207,8 @@ export class KupChip {
       (!this.dataNew || this.dataNew.length === 0)) {
       return;
     }
-    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(FChip, Object.assign({}, props)))));
   }
@@ -237,11 +236,11 @@ export class KupChip {
       "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."
       },
@@ -266,8 +265,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "List of elements."
       },
@@ -290,8 +289,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "List of elements."
       },
@@ -314,8 +313,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FChipType.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "FChipType.STANDARD"
           }],
         "text": "The type of chip. Available types: input, filter, choice or empty for default."
       },
@@ -411,8 +410,8 @@ export class KupChip {
         "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."
           }],
@@ -459,8 +458,8 @@ export class KupChip {
         "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."
           }],