@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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