@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -151,9 +151,8 @@ export class KupSwitch {
       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(FSwitch, Object.assign({}, props)))));
   }
@@ -181,8 +180,8 @@ export class KupSwitch {
       "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'."
       },
@@ -202,11 +201,11 @@ export class KupSwitch {
       "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."
       },
@@ -226,8 +225,8 @@ export class KupSwitch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -247,8 +246,8 @@ export class KupSwitch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Defaults at null. When specified, its content will be shown as a label."
       },
@@ -268,8 +267,8 @@ export class KupSwitch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the label will be on the left of the component."
       },
@@ -348,8 +347,8 @@ export class KupSwitch {
         "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."
           }],
@@ -396,8 +395,8 @@ export class KupSwitch {
         "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-tab-bar/kup-tab-bar.css

@@ -1,202 +1,3 @@
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-}
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.mdc-ripple-surface {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-  position: relative;
-  outline: none;
-  overflow: hidden;
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-
-.mdc-ripple-surface::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-
-.mdc-ripple-surface::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  left: var(--mdc-ripple-left, 0);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-
-.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-
-.mdc-ripple-surface.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
-.mdc-ripple-upgraded--unbounded {
-  overflow: visible;
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
-.mdc-ripple-upgraded--unbounded::before,
-.mdc-ripple-upgraded--unbounded::after {
-  top: calc(50% - 50%);
-  /* @noflip */
-  left: calc(50% - 50%);
-  width: 100%;
-  height: 100%;
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  left: var(--mdc-ripple-left, calc(50% - 50%));
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
-.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-
-.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;
-}
-
 /**
 * @prop --kup-tabbar-font-family: Sets font family of the component.
 * @prop --kup-tabbar-font-size: Sets font size of the component.

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

@@ -180,9 +180,8 @@ export class KupTabBar {
           h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
       tabBar.push(tabEl);
     }
-    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("div", { class: "tab-bar", role: "tablist" },
           h("div", { class: "tab-scroller" },
@@ -215,11 +214,11 @@ export class KupTabBar {
       "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."
       },
@@ -244,8 +243,8 @@ export class KupTabBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "List of elements."
       },
@@ -263,8 +262,8 @@ export class KupTabBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When enabled displays Material's ripple effect on item headers."
       },
@@ -343,8 +342,8 @@ export class KupTabBar {
         "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."
           }],
@@ -391,8 +390,8 @@ export class KupTabBar {
         "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-text-field/kup-text-field-declarations.js

@@ -9,6 +9,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
+  KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";