@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-button-list/kup-button-list.css

@@ -1,335 +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-button--wrapper {
-  --kup_button_border_radius: var(--kup-button-border-radius, 4px);
-  --kup_button_disabled_color: var(
-    --kup-button-disabled-color,
-    var(--kup-disabled-color)
-  );
-  --kup_button_font_family: var(
-    --kup-button-font-family,
-    var(--kup-font-family)
-  );
-  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
-  --kup_button_font_weight: var(--kup-button-font-weight, 400);
-  --kup_button_height: var(--kup-button-height, 3em);
-  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
-  --kup_button_primary_color: var(
-    --kup-button-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_button_primary_color_h: var(
-    --kup-button-primary-color-h,
-    var(--kup-primary-color-h)
-  );
-  --kup_button_primary_color_s: var(
-    --kup-button-primary-color-s,
-    var(--kup-primary-color-s)
-  );
-  --kup_button_primary_color_l: var(
-    --kup-button-primary-color-l,
-    var(--kup-primary-color-l)
-  );
-  --kup_button_primary_color_rgb: var(
-    --kup-button-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup-spinner-color: var(--kup_button_primary_color);
-  font-family: var(--kup_button_font_family);
-  font-size: var(--kup_button_font_size);
-}
-.f-button--wrapper .button {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-appearance: none;
-  -webkit-font-smoothing: antialiased;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--kup_button_border_radius);
-  box-sizing: border-box;
-  color: var(--kup_button_primary_color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 0.775em;
-  font-weight: var(--kup_button_font_weight);
-  height: var(--kup_button_height);
-  justify-content: center;
-  letter-spacing: 0.0892857143em;
-  line-height: inherit;
-  min-width: 64px;
-  outline: none;
-  overflow: visible;
-  padding: var(--kup_button_padding);
-  position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color 80ms linear, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  user-select: none;
-  vertical-align: middle;
-}
-.f-button--wrapper .button:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button .button__icon {
-  margin-left: -0.25em;
-  margin-right: 0.75em;
-}
-.f-button--wrapper .button .button__label + .button__icon {
-  margin-left: 0.75em;
-  margin-right: -0.25em;
-}
-.f-button--wrapper .button.button--floating, .f-button--wrapper .button.button--raised {
-  --kup-spinner-color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:not(.button--disabled), .f-button--wrapper .button.button--raised:not(.button--disabled) {
-  --kup-spinner-border-color: hsl(
-    var(--kup_button_primary_color_h),
-    calc(var(--kup_button_primary_color_s) * 0.75),
-    calc(var(--kup_button_primary_color_l) * 0.85)
-  );
-  background-color: var(--kup_button_primary_color);
-  color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--raised:hover {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.93), calc(var(--kup_button_primary_color_l) * 1.07));
-}
-.f-button--wrapper .button.button--floating:focus, .f-button--wrapper .button.button--raised:focus {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.88), calc(var(--kup_button_primary_color_l) * 1.12));
-}
-.f-button--wrapper .button.button--floating.button--disabled, .f-button--wrapper .button.button--raised.button--disabled {
-  background-color: var(--kup-disabled-background-color);
-  box-shadow: none;
-}
-.f-button--wrapper .button.button--floating {
-  border-radius: 24px;
-  box-shadow: 0 0.215em 0.35em -1px rgba(var(--kup-text-color-rgb), 0.2), 0 0.43em 0.71em 0 rgba(var(--kup-text-color-rgb), 0.14), 0 0.07em 1.285em 0 rgba(var(--kup-text-color-rgb), 0.12);
-  font-weight: 500;
-  font-size: 1em;
-  height: 3.4em;
-  width: auto;
-  padding: 0 1.5em;
-}
-.f-button--wrapper .button.button--floating.button--no-label {
-  border-radius: 50%;
-  height: 4em;
-  padding: 0;
-  width: 4em;
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-.f-button--wrapper .button.button--outlined:not(.button--disabled) {
-  border-color: var(--kup_button_primary_color);
-  background-color: transparent;
-  color: var(--kup_button_primary_color);
-}
-.f-button--wrapper .button.button--outlined:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button.button--outlined:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button.button--outlined.button--disabled {
-  opacity: 0.75;
-  border-color: var(--kup_button_disabled_color);
-}
-.f-button--wrapper .button.button--no-label {
-  min-width: unset;
-  padding: 0 0.5em;
-}
-.f-button--wrapper .button.button--no-label .button__icon {
-  margin: 0;
-}
-.f-button--wrapper .button.button--disabled {
-  color: var(--kup_button_disabled_color);
-  cursor: auto;
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .button .button__spinner-container {
-  width: 100%;
-  height: var(--kup_button_spinner_height);
-  left: 0;
-  position: absolute;
-}
-.f-button--wrapper .icon-button {
-  background-color: transparent;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  font-size: var(--kup_button_font_size);
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  padding: 0.75em;
-  border-radius: 50%;
-}
-.f-button--wrapper .icon-button:hover, .f-button--wrapper .icon-button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .icon-button .icon-button__icon {
-  display: flex;
-  margin: auto;
-}
-.f-button--wrapper .icon-button .icon-button__icon.icon-button__icon--on {
-  display: none;
-}
-.f-button--wrapper .icon-button.button--disabled {
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .icon-button .icon-button__spinner-container {
-  width: var(--kup_button_spinner_width);
-  height: var(--kup_button_spinner_height);
-}
-.f-button--wrapper .button--with-spinner {
-  opacity: 0.8;
-  pointer-events: none;
-}
-.f-button--wrapper .content--hidden {
-  visibility: hidden;
-}
-.f-button--wrapper.kup-full-height {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-height .button {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-width {
-  width: 100%;
-}
-.f-button--wrapper.kup-full-width .button {
-  width: 100%;
-}
-.f-button--wrapper.kup-large button {
-  font-size: 1.25em;
-}
-.f-button--wrapper.kup-shaped .button {
-  border-radius: 18px;
-}
-.f-button--wrapper.kup-shaped .button.button--floating {
-  border-radius: 50% 0;
-}
-.f-button--wrapper.kup-slim button {
-  font-size: 0.675em;
-}
-.f-button--wrapper.kup-pulsating .icon-button--on:after {
-  content: "";
-  animation: pulsating 1250ms infinite;
-  position: absolute;
-  height: 2px;
-  width: 2px;
-  top: calc(50% - 1px);
-  left: calc(50% - 1px);
-  border-radius: 50%;
-}
-.f-button--wrapper.kup-danger {
-  --kup-button-primary-color: var(--kup-danger-color);
-  --kup-button-primary-color-h: var(--kup-danger-color-h);
-  --kup-button-primary-color-s: var(--kup-danger-color-s);
-  --kup-button-primary-color-l: var(--kup-danger-color-l);
-  --kup-button-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-info {
-  --kup-button-primary-color: var(--kup-info-color);
-  --kup-button-primary-color-h: var(--kup-info-color-h);
-  --kup-button-primary-color-s: var(--kup-info-color-s);
-  --kup-button-primary-color-l: var(--kup-info-color-l);
-  --kup-button-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-secondary {
-  --kup-button-primary-color: var(--kup-secondary-color);
-  --kup-button-primary-color-h: var(--kup-secondary-color-h);
-  --kup-button-primary-color-s: var(--kup-secondary-color-s);
-  --kup-button-primary-color-l: var(--kup-secondary-color-l);
-  --kup-button-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-button-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-.f-button--wrapper.kup-success {
-  --kup-button-primary-color: var(--kup-success-color);
-  --kup-button-primary-color-h: var(--kup-success-color-h);
-  --kup-button-primary-color-s: var(--kup-success-color-s);
-  --kup-button-primary-color-l: var(--kup-success-color-l);
-  --kup-button-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-warning {
-  --kup-button-primary-color: var(--kup-warning-color);
-  --kup-button-primary-color-h: var(--kup-warning-color-h);
-  --kup-button-primary-color-s: var(--kup-warning-color-s);
-  --kup-button-primary-color-l: var(--kup-warning-color-l);
-  --kup-button-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-
-@keyframes pulsating {
-  0% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0.7);
-  }
-  70% {
-    transform: scale(2.75);
-    box-shadow: 0 0 0 10px rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-  100% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-}
 /**
 * @prop --kup-buttonlist-grid-gap: Sets gap between each button.
 * @prop --kup-buttonlist-selected-primary-color: Sets the primary color of a selected button.

package/dist/collection/components/kup-button-list/kup-button-list.js

@@ -267,13 +267,12 @@ export class KupButtonList {
     const hostStyle = {
       '--kup_buttonlist_grid_columns': `repeat(${nrOfColumns}, auto)`,
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     const classObj = {
       'button-list--container': true,
       'show-selection': this.showSelection && this.selected ? true : false,
     };
     return (h(Host, { style: hostStyle },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
         h("div", { class: classObj }, buttons))));
   }
@@ -301,8 +300,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "0",
-            "name": "default"
+            "name": "default",
+            "text": "0"
           }],
         "text": "Number of columns."
       },
@@ -322,11 +321,11 @@ export class KupButtonList {
       "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."
       },
@@ -351,8 +350,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "Props of the sub-components."
       },
@@ -370,8 +369,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the sub-components are disabled."
       },
@@ -391,8 +390,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When set to true, highlights the selected button with the secondary color of KupTheme."
       },
@@ -417,8 +416,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FButtonStyling.RAISED",
-            "name": "default"
+            "name": "default",
+            "text": "FButtonStyling.RAISED"
           }],
         "text": "Defines the style of the buttons. Available styles are \"flat\", \"outlined\" and \"raised\" (which is the default)."
       },
@@ -457,8 +456,8 @@ export class KupButtonList {
         "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."
           }],
@@ -505,8 +504,8 @@ export class KupButtonList {
         "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."
           }],