@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -207,9 +207,8 @@ export class KupField {
     if ((submitIsRight || submitIsBottom) && submit) {
       toRender.push(submit);
     }
-    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, class: wrapperClass }, toRender)));
   }
   disconnectedCallback() {
@@ -236,11 +235,11 @@ export class KupField {
       "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."
       },
@@ -264,8 +263,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{}",
-            "name": "default"
+            "name": "default",
+            "text": "{}"
           }],
         "text": "Effective data to pass to the component."
       },
@@ -283,8 +282,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "The text of the label. If set to empty or has only white space chars, the label will be removed."
       },
@@ -304,8 +303,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"left\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"left\""
           }],
         "text": "Sets the label's position, left right or top."
       },
@@ -325,8 +324,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets whether the submit button must be displayed or not."
       },
@@ -346,8 +345,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the submit button's label."
       },
@@ -367,8 +366,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"right\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"right\""
           }],
         "text": "Sets the submit button's position, top right bottom or left."
       },
@@ -388,8 +387,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The type of the FLD"
       },
@@ -467,8 +466,8 @@ export class KupField {
         "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."
           }],

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

@@ -363,9 +363,8 @@ export class KupGauge {
         this.measurementUnit));
     }
     const width = { width: this.widthComponent };
-    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, class: "gauge__container" },
         h("svg", { class: "gauge", style: width, viewBox: `0 0 ${this.size} ${valueLabelYPosition}` },
           h("g", { transform: `rotate(-90) translate(-${halvedSize}, ${halvedSize})` }, arcsElements),
@@ -398,11 +397,11 @@ export class KupGauge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "kup-gauge.arcThickness",
-            "name": "namespace"
+            "name": "namespace",
+            "text": "kup-gauge.arcThickness"
           }, {
-            "text": "kup-gauge.size",
-            "name": "see"
+            "name": "see",
+            "text": "kup-gauge.size"
           }],
         "text": "Sets how much the arc of the gauge should be thick."
       },
@@ -438,11 +437,11 @@ export class KupGauge {
       "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."
       },
@@ -676,11 +675,11 @@ export class KupGauge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "kup-gauge.size",
-            "name": "namespace"
+            "name": "namespace",
+            "text": "kup-gauge.size"
           }, {
-            "text": "kup-gauge.arcThickness",
-            "name": "see"
+            "name": "see",
+            "text": "kup-gauge.arcThickness"
           }],
         "text": "Con be used change the viewbox of the SVG.\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
       },
@@ -749,8 +748,8 @@ export class KupGauge {
         "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."
           }],
@@ -797,8 +796,8 @@ export class KupGauge {
         "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-grid/kup-grid.css

@@ -31,10 +31,11 @@
   grid-template-columns: repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr));
 }
 .layout-grid .layout-grid__inner .layout-grid__cell {
+  box-sizing: border-box;
   display: flex;
+  justify-content: center;
   margin: 0px;
   width: auto;
-  box-sizing: border-box;
 }
 .layout-grid__cell--span-1 {
   grid-column-end: span 1;

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

@@ -98,9 +98,8 @@ export class KupGrid {
     const style = {
       ['--kup_grid_columns']: this.columns,
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: style },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
         h("div", { class: this.singleLine ? 'flex-layout' : 'layout-grid' },
           h("div", { class: this.singleLine
@@ -131,8 +130,8 @@ export class KupGrid {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "12",
-            "name": "default"
+            "name": "default",
+            "text": "12"
           }],
         "text": "The number of columns displayed by the grid, the default behavior is 12."
       },
@@ -152,11 +151,11 @@ export class KupGrid {
       "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."
       },
@@ -176,8 +175,8 @@ export class KupGrid {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, forces the content on a single line."
       },
@@ -192,8 +191,8 @@ export class KupGrid {
         "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."
           }],
@@ -240,8 +239,8 @@ export class KupGrid {
         "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-iframe/kup-iframe.js

@@ -208,8 +208,8 @@ export class KupIframe {
         "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."
           }],
@@ -256,8 +256,8 @@ export class KupIframe {
         "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-image/assets/svg/ketchup.svg

@@ -0,0 +1,74 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 129.05 48.14"
+      >
+        <g>
+          <g>
+            <g>
+              <rect
+                y="3.29"
+                width="19.92"
+                height="19.92"
+              />
+              <rect
+                y="28.22"
+                width="19.92"
+                height="19.92"
+              />
+              <rect
+                x="24.9"
+                y="28.22"
+                width="19.92"
+                height="19.92"
+              />
+              <rect
+                x="24.04"
+                y="4.12"
+                width="19.92"
+                height="19.92"
+                transform="translate(0 28.16) rotate(-45)"
+              />
+            </g>
+            <g>
+              <path
+                d="M64.59,36.84a3.2,3.2,0,0,1-.65.06,1.61,1.61,0,0,1-1-.25,1,1,0,0,1-.32-.87V24.42a2.09,2.09,0,0,1,.45-.11,4.28,4.28,0,0,1,.65,0,1.68,1.68,0,0,1,1,.24,1.07,1.07,0,0,1,.32.88v5.89l3.69-3.67a1.94,1.94,0,0,1,1.16.32,1,1,0,0,1,.43.82,1.16,1.16,0,0,1-.27.76,7.31,7.31,0,0,1-.87.82l-2.05,1.78,3.63,3.4a1.83,1.83,0,0,1-.4,1,1.14,1.14,0,0,1-.93.37,1.41,1.41,0,0,1-.77-.21,4.5,4.5,0,0,1-.81-.74L65,32.85v3.9Z"
+              />
+              <path
+                d="M74.16,33.35a2.27,2.27,0,0,0,1,1.4,3.42,3.42,0,0,0,1.79.44A4.36,4.36,0,0,0,78.41,35a5.35,5.35,0,0,0,1.09-.5,1.26,1.26,0,0,1,.44.42,1.06,1.06,0,0,1,.17.57,1,1,0,0,1-.26.67,2,2,0,0,1-.7.51,5.22,5.22,0,0,1-1.05.32,7.83,7.83,0,0,1-1.32.11,6.61,6.61,0,0,1-2-.3,4.1,4.1,0,0,1-1.57-.92,4.26,4.26,0,0,1-1-1.53,5.59,5.59,0,0,1-.37-2.13,5.33,5.33,0,0,1,.36-2.05,4.35,4.35,0,0,1,1-1.47,4,4,0,0,1,1.43-.87,5.23,5.23,0,0,1,1.73-.28,4.72,4.72,0,0,1,1.71.29,4,4,0,0,1,1.33.82,3.7,3.7,0,0,1,.87,1.25,4.17,4.17,0,0,1,.31,1.59,1.05,1.05,0,0,1-.28.8,1.41,1.41,0,0,1-.77.34Zm2.11-4.05a2.15,2.15,0,0,0-1.56.62,2.65,2.65,0,0,0-.7,1.76l4.22-.63a2.17,2.17,0,0,0-.55-1.23A1.81,1.81,0,0,0,76.27,29.3Z"
+              />
+              <path
+                d="M85.13,34.85a1.76,1.76,0,0,0,1,.26,3,3,0,0,0,.66-.07,3.72,3.72,0,0,0,.59-.19,1.12,1.12,0,0,1,.26.37,1.15,1.15,0,0,1,.11.5,1.12,1.12,0,0,1-.52.94,2.83,2.83,0,0,1-1.65.37,3.77,3.77,0,0,1-2.37-.67,2.67,2.67,0,0,1-.86-2.23V25.41l.45-.1a3.06,3.06,0,0,1,.63-.06,1.6,1.6,0,0,1,1,.25,1.06,1.06,0,0,1,.31.87V28h2.8a1.92,1.92,0,0,1,.17.4,1.83,1.83,0,0,1,.07.53,1,1,0,0,1-.22.72.81.81,0,0,1-.61.23H84.76V34A1,1,0,0,0,85.13,34.85Z"
+              />
+              <path
+                d="M94.15,29.42a3,3,0,0,0-1.05.18,2.34,2.34,0,0,0-.84.56,2.65,2.65,0,0,0-.56.89,3.34,3.34,0,0,0-.21,1.23,2.82,2.82,0,0,0,.74,2.12,2.64,2.64,0,0,0,1.92.71,3.31,3.31,0,0,0,1.15-.18,6.3,6.3,0,0,0,.86-.39,1.79,1.79,0,0,1,.43.44,1,1,0,0,1,.16.57A1.23,1.23,0,0,1,96,36.62a4.36,4.36,0,0,1-2,.41,6.23,6.23,0,0,1-2-.29,4.09,4.09,0,0,1-1.55-.89,4,4,0,0,1-1-1.5,5.68,5.68,0,0,1-.35-2.07,5.32,5.32,0,0,1,.38-2.1,4.27,4.27,0,0,1,1-1.5A4.34,4.34,0,0,1,92,27.79a5.77,5.77,0,0,1,1.87-.29,4,4,0,0,1,2,.44A1.29,1.29,0,0,1,96.66,29a1.08,1.08,0,0,1-.16.56,1.54,1.54,0,0,1-.37.39c-.26-.13-.54-.26-.85-.39A3.16,3.16,0,0,0,94.15,29.42Z"
+              />
+              <path
+                d="M100.69,36.84a3.2,3.2,0,0,1-.65.06,1.61,1.61,0,0,1-1-.25,1,1,0,0,1-.32-.87V24.42a2.09,2.09,0,0,1,.45-.11,4.28,4.28,0,0,1,.65,0,1.68,1.68,0,0,1,1,.24,1.07,1.07,0,0,1,.32.88V28a5.35,5.35,0,0,1,1-.36,4.5,4.5,0,0,1,1.21-.15,4,4,0,0,1,2.75.89,3.36,3.36,0,0,1,1,2.7v5.66l-.45.09a3.13,3.13,0,0,1-.63.06,1.61,1.61,0,0,1-1-.25,1,1,0,0,1-.32-.87V31.2a1.75,1.75,0,0,0-.5-1.38,1.93,1.93,0,0,0-1.29-.42,2.67,2.67,0,0,0-1,.16,4,4,0,0,0-.8.39v6.8Z"
+              />
+              <path
+                d="M117.71,35.73a1.32,1.32,0,0,1-.55.52,5.09,5.09,0,0,1-1.4.57,7,7,0,0,1-1.93.23,6.52,6.52,0,0,1-1.78-.22,3.73,3.73,0,0,1-1.37-.67,2.89,2.89,0,0,1-.87-1.16,4.08,4.08,0,0,1-.31-1.67V27.8a2.2,2.2,0,0,1,.45-.1,3.24,3.24,0,0,1,.65-.05,1.72,1.72,0,0,1,1,.23,1,1,0,0,1,.32.89v4.52a1.77,1.77,0,0,0,.51,1.42,2.16,2.16,0,0,0,1.43.42,3.59,3.59,0,0,0,1-.11,2.54,2.54,0,0,0,.62-.25v-7a2.24,2.24,0,0,1,.44-.1,3.26,3.26,0,0,1,.64-.05,1.73,1.73,0,0,1,1,.23,1.06,1.06,0,0,1,.31.89V35A1.58,1.58,0,0,1,117.71,35.73Z"
+              />
+              <path
+                d="M124.53,37a4.64,4.64,0,0,1-1-.1,5.55,5.55,0,0,1-.84-.26v3.5l-.46.09a3.1,3.1,0,0,1-.64.06,1.57,1.57,0,0,1-1-.25,1,1,0,0,1-.32-.87V29.57a1.35,1.35,0,0,1,.18-.74,1.8,1.8,0,0,1,.58-.54,6.27,6.27,0,0,1,1.36-.56,7,7,0,0,1,1.85-.23,6.62,6.62,0,0,1,1.93.27,4.15,4.15,0,0,1,1.52.86,3.71,3.71,0,0,1,1,1.47,5.65,5.65,0,0,1,.36,2.13,5.84,5.84,0,0,1-.34,2.09,4.4,4.4,0,0,1-.94,1.5,3.85,3.85,0,0,1-1.42.91A5.35,5.35,0,0,1,124.53,37Zm-.36-1.92a2.32,2.32,0,0,0,1.79-.7,3.15,3.15,0,0,0,.64-2.18,3,3,0,0,0-.66-2.19,2.37,2.37,0,0,0-1.71-.64,2.77,2.77,0,0,0-.91.13,4.84,4.84,0,0,0-.67.28V34.7a3.41,3.41,0,0,0,.67.3A2.78,2.78,0,0,0,124.17,35.11Z"
+              />
+            </g>
+            <g>
+              <path
+                d="M67.81,14.05a1.67,1.67,0,0,1-.65,1.4,3.15,3.15,0,0,1-1.91.5,5,5,0,0,1-1-.09,3.24,3.24,0,0,1-.76-.24,1.57,1.57,0,0,1-.49-.34.53.53,0,0,1-.17-.38.62.62,0,0,1,.09-.32.77.77,0,0,1,.27-.27,4.6,4.6,0,0,0,.88.5,3,3,0,0,0,1.15.22c1,0,1.46-.33,1.46-1s-.33-.88-1-1l-1.16-.31a2.58,2.58,0,0,1-1.25-.65,1.56,1.56,0,0,1-.39-1.1,1.73,1.73,0,0,1,.15-.7,1.58,1.58,0,0,1,.45-.59,2.6,2.6,0,0,1,.76-.4,3.83,3.83,0,0,1,1.08-.14A3.73,3.73,0,0,1,67,9.4c.4.2.6.42.6.67a.57.57,0,0,1-.09.32.52.52,0,0,1-.25.21,4.16,4.16,0,0,0-.71-.36,2.79,2.79,0,0,0-1.09-.2,1.8,1.8,0,0,0-1,.24A.75.75,0,0,0,64,11a.73.73,0,0,0,.21.55,1.31,1.31,0,0,0,.7.33l1,.24a3.09,3.09,0,0,1,1.43.71A1.68,1.68,0,0,1,67.81,14.05Z"
+              />
+              <path
+                d="M77.33,10.36a1.61,1.61,0,0,0-1-.32,2.38,2.38,0,0,0-1.63.65,1.89,1.89,0,0,1,.09.6v4.45l-.22.06a1,1,0,0,1-.3,0c-.4,0-.61-.17-.61-.51v-4a1.24,1.24,0,0,0-.39-1A1.63,1.63,0,0,0,72.17,10a2.66,2.66,0,0,0-.85.14,3.93,3.93,0,0,0-.68.32v5.24l-.21.06a1,1,0,0,1-.31,0q-.6,0-.6-.51V10.56a.86.86,0,0,1,.12-.47,1.33,1.33,0,0,1,.42-.38,4,4,0,0,1,1-.42,4.3,4.3,0,0,1,1.17-.17,3.51,3.51,0,0,1,1.22.2,1.84,1.84,0,0,1,.81.55,3.17,3.17,0,0,1,2.16-.75,2.83,2.83,0,0,1,1.81.54,2,2,0,0,1,.67,1.66v4.42l-.22.06a1,1,0,0,1-.3,0q-.6,0-.6-.51v-4A1.22,1.22,0,0,0,77.33,10.36Z"
+              />
+              <path
+                d="M81.76,13.19A2.17,2.17,0,0,0,84.17,15a2.78,2.78,0,0,0,1.06-.2,3.12,3.12,0,0,0,.76-.42.6.6,0,0,1,.33.53.57.57,0,0,1-.17.38,1.61,1.61,0,0,1-.48.32,3,3,0,0,1-.7.23,4.57,4.57,0,0,1-.86.08,3.61,3.61,0,0,1-2.57-.88,3.36,3.36,0,0,1-.94-2.58,4,4,0,0,1,.23-1.42A3.13,3.13,0,0,1,81.47,10a2.78,2.78,0,0,1,1-.66,3.41,3.41,0,0,1,2.41,0,2.7,2.7,0,0,1,.91.59,2.85,2.85,0,0,1,.61.91A3.11,3.11,0,0,1,86.6,12a.57.57,0,0,1-.14.44.64.64,0,0,1-.39.16ZM83.69,10a1.86,1.86,0,0,0-1.41.59,2.48,2.48,0,0,0-.59,1.7l3.85-.53A2.13,2.13,0,0,0,85,10.52,1.71,1.71,0,0,0,83.69,10Z"
+              />
+              <path
+                d="M88.24,9.33l.22-.07a1.55,1.55,0,0,1,.31,0c.4,0,.59.17.59.52v3.6a1.57,1.57,0,0,0,.48,1.29,2,2,0,0,0,1.31.39,3.23,3.23,0,0,0,.95-.12,2.72,2.72,0,0,0,.62-.25V9.33l.22-.07.3,0c.4,0,.6.17.6.52v4.87a1.21,1.21,0,0,1-.08.47.78.78,0,0,1-.37.34,4.21,4.21,0,0,1-.89.35,4.85,4.85,0,0,1-1.36.17A3.32,3.32,0,0,1,89,15.33a2.35,2.35,0,0,1-.75-1.93Z"
+              />
+              <path
+                d="M98.71,16a3.93,3.93,0,0,1-.92-.11,3.65,3.65,0,0,1-.72-.27v2.72l-.21.06a1.36,1.36,0,0,1-.3,0c-.4,0-.61-.18-.61-.52V10.48a.94.94,0,0,1,.1-.45,1.15,1.15,0,0,1,.41-.35,5.51,5.51,0,0,1,.9-.39,4,4,0,0,1,1.2-.17,4.15,4.15,0,0,1,1.29.19,2.74,2.74,0,0,1,1.05.61,2.85,2.85,0,0,1,.7,1.06,4,4,0,0,1,.26,1.54,4.32,4.32,0,0,1-.23,1.51A2.8,2.8,0,0,1,101,15.1a2.57,2.57,0,0,1-1,.64A3.72,3.72,0,0,1,98.71,16ZM98.56,15a2.1,2.1,0,0,0,1.57-.6,2.6,2.6,0,0,0,.6-1.91,3.25,3.25,0,0,0-.18-1.16,1.9,1.9,0,0,0-.47-.77,1.63,1.63,0,0,0-.7-.42,2.47,2.47,0,0,0-.82-.13,2.43,2.43,0,0,0-.86.13,3.63,3.63,0,0,0-.63.28v4.13a2.33,2.33,0,0,0,.63.32A2.78,2.78,0,0,0,98.56,15Z"
+              />
+            </g>
+          </g>
+        </g></svg
+    >

package/dist/collection/components/kup-image/assets/svg/smeup.svg

@@ -0,0 +1,59 @@
+<svg
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              x="0px"
+              y="0px"
+              viewBox="0 0 519.3 212.4"
+              style="enable-background: new 0 0 519.3 212.4"
+              xml:space="preserve"
+            >
+              <g>
+                <g>
+                  <path
+                    d="M65,120c0,7.8-2.9,13.9-8.6,18.3c-5.7,4.4-14,6.6-24.9,6.6c-4.6,0-8.9-0.4-12.8-1.2c-3.9-0.8-7.2-1.8-10-3.1
+			c-2.7-1.3-4.9-2.8-6.4-4.4c-1.5-1.7-2.3-3.3-2.3-5c0-1.5,0.4-2.9,1.2-4.2c0.8-1.3,2-2.5,3.6-3.5c3.3,2.4,7.1,4.6,11.5,6.5
+			c4.4,1.9,9.4,2.8,15,2.8c12.7,0,19.1-4.3,19.1-12.8c0-7-4.2-11.5-12.6-13.6l-15.2-4c-7.5-2-12.9-4.8-16.3-8.5
+			c-3.4-3.7-5.1-8.5-5.1-14.4c0-3.2,0.6-6.2,1.9-9.2c1.3-2.9,3.3-5.5,6-7.7c2.7-2.2,6-3.9,10-5.2c4-1.3,8.6-1.9,14-1.9
+			c8.5,0,15.5,1.3,20.7,3.8c5.3,2.5,7.9,5.4,7.9,8.7c0,1.6-0.4,3-1.2,4.2c-0.8,1.2-1.9,2.1-3.2,2.8c-2.2-1.5-5.3-3.1-9.3-4.8
+			c-4-1.7-8.8-2.6-14.3-2.6s-9.9,1-13.1,3.1c-3.2,2.1-4.9,5-4.9,8.8c0,2.8,0.9,5.2,2.8,7.1c1.8,2,4.9,3.4,9.2,4.4l12.6,3.1
+			c8.3,2.1,14.5,5.2,18.7,9.3C63,107.5,65,113.1,65,120z"
+                  />
+                  <path
+                    d="M189.5,71.8c-3.4-2.8-8-4.2-13.7-4.2c-7.9,0-15,2.8-21.3,8.4c0.7,2.4,1.1,5.1,1.1,7.9v58.3
+			c-0.6,0.2-1.6,0.5-2.8,0.8c-1.3,0.3-2.6,0.5-3.9,0.5c-5.3,0-7.9-2.2-7.9-6.6V85c0-6-1.7-10.4-5.1-13.2c-3.4-2.8-8.1-4.2-13.9-4.2
+			c-3.9,0-7.6,0.6-11.1,1.8c-3.5,1.2-6.4,2.6-8.9,4.2v68.5c-0.6,0.2-1.5,0.5-2.7,0.8c-1.2,0.3-2.6,0.5-4,0.5c-5.3,0-7.9-2.2-7.9-6.6
+			V74.4c0-2.4,0.5-4.5,1.6-6.1c1-1.6,2.8-3.3,5.4-5c3.3-2.1,7.5-3.9,12.6-5.4c5.1-1.5,10.2-2.3,15.3-2.3c6,0,11.3,0.9,15.9,2.7
+			s8.2,4.2,10.6,7.2c3.2-2.8,7.1-5.2,11.9-7.1c4.8-1.9,10.2-2.8,16.3-2.8c9.9,0,17.8,2.4,23.6,7.1c5.9,4.7,8.8,11.9,8.8,21.7v57.9
+			c-0.6,0.2-1.6,0.5-2.8,0.8c-1.3,0.3-2.6,0.5-3.9,0.5c-5.3,0-7.9-2.2-7.9-6.6V85C194.6,79,192.9,74.7,189.5,71.8z"
+                  />
+                  <path
+                    d="M247.2,108.9c3.3,16,13.8,24,31.5,24c5.1,0,9.8-0.9,13.9-2.6c4.2-1.7,7.4-3.5,9.9-5.5c2.9,1.7,4.4,4,4.4,7
+			c0,1.7-0.8,3.4-2.3,5c-1.5,1.6-3.6,3-6.2,4.2c-2.6,1.2-5.7,2.2-9.2,2.9c-3.5,0.7-7.2,1.1-11.3,1.1c-14.2,0-25.4-3.9-33.6-11.5
+			c-8.2-7.7-12.4-18.9-12.4-33.7c0-7,1-13.2,3-18.6c2-5.4,4.8-10.1,8.4-13.8c3.6-3.8,7.9-6.7,12.9-8.7c5-2,10.4-3,16.3-3
+			c5.5,0,10.6,0.9,15.2,2.8c4.6,1.8,8.6,4.4,12,7.8c3.4,3.4,6,7.3,7.9,11.9c1.9,4.6,2.8,9.6,2.8,15.1c0,2.7-0.6,4.6-1.8,5.8
+			c-1.2,1.2-2.9,1.9-5.1,2.1L247.2,108.9z M272.5,67.4c-7.5,0-13.6,2.6-18.5,7.8c-4.9,5.2-7.5,12.6-7.7,22.3l50.4-7
+			c-0.6-6.7-3-12.2-7.1-16.6C285.5,69.6,279.8,67.4,272.5,67.4z"
+                  />
+                  <g>
+                    <path
+                      d="M501.4,0.8H326.4c0,0-17.9,0-17.9,19.5v171.8c0,0,0,19.5,17.9,19.5h175.1c0,0,17.9,0,17.9-19.5V20.3
+				C519.3,20.3,519.3,0.8,501.4,0.8z M400.9,128.8c0,2.6-0.3,4.6-1,6.1c-0.7,1.5-2.3,3-4.9,4.5c-2.8,1.6-6.7,3.1-11.6,4.6
+				c-5,1.5-10.9,2.2-17.9,2.2c-12.2,0-21.6-2.7-28.1-8.1c-6.5-5.4-9.8-13.8-9.8-25.3V59.5c0.6-0.2,1.6-0.5,2.8-0.8
+				c1.3-0.3,2.7-0.5,4.1-0.5c5.1,0,7.7,2.3,7.7,6.8v47.1c0,7.9,2.1,13.6,6.2,16.9c4.2,3.4,9.9,5,17.2,5c4.9,0,9-0.5,12.5-1.6
+				c3.4-1,6.1-2.1,8.1-3.2V59.5c0.6-0.2,1.6-0.5,2.8-0.8c1.3-0.3,2.6-0.5,3.9-0.5c5.2,0,7.9,2.3,7.9,6.8V128.8z M496.7,121.1
+				c-2,5.6-4.9,10.3-8.5,14c-3.7,3.7-8,6.5-13.1,8.3c-5.1,1.8-10.6,2.8-16.6,2.8c-4.3,0-8.3-0.5-12.1-1.5c-3.8-1-6.9-2.1-9.3-3.5
+				v35.5c-0.6,0.2-1.5,0.5-2.7,0.8c-1.2,0.3-2.6,0.5-4,0.5c-5.3,0-7.9-2.3-7.9-6.8V74.5c0-2.4,0.4-4.4,1.3-5.9
+				c0.9-1.5,2.6-3,5.3-4.6c3.3-1.8,7.2-3.5,11.8-5c4.6-1.5,9.8-2.3,15.7-2.3c6,0,11.6,0.9,17,2.6c5.3,1.7,9.9,4.4,13.7,8
+				c3.8,3.6,6.9,8.2,9.2,13.8c2.3,5.6,3.4,12.3,3.4,20.1C499.7,108.9,498.7,115.5,496.7,121.1z"
+                    />
+                    <path
+                      d="M476.3,76c-2.6-2.6-5.7-4.4-9.1-5.5c-3.4-1.1-7-1.7-10.8-1.7c-4.4,0-8.1,0.6-11.2,1.7
+				c-3.1,1.1-5.8,2.3-8.2,3.7v54.1c2.3,1.7,5.1,3.1,8.2,4.2c3.2,1.1,6.9,1.7,11.2,1.7c8.5,0,15.4-2.6,20.6-7.8
+				c5.2-5.2,7.8-13.5,7.8-25c0-6-0.8-11.1-2.3-15.2C481,81.9,479,78.6,476.3,76z"
+                    />
+                  </g>
+                </g>
+              </g>
+              <g></g>
+            </svg>

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

@@ -1,35 +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;
-}
-
 :host {
   display: block;
   position: relative;

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

@@ -177,9 +177,8 @@ export class KupImage {
       this.kupManager.debug.logMessage(this, message, KupDebugCategory.WARNING);
       return;
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: elStyle },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       feedback,
       h("div", { id: componentWrapperId }, el)));
   }
@@ -213,8 +212,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the data of badges."
       },
@@ -232,8 +231,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupThemeColorValues.ICON",
-            "name": "default"
+            "name": "default",
+            "text": "KupThemeColorValues.ICON"
           }],
         "text": "The color of the icon, defaults to the CSS variable KupThemeColorValues.ICON."
       },
@@ -253,11 +252,11 @@ export class KupImage {
       "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."
       },
@@ -282,8 +281,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information."
       },
@@ -301,8 +300,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs."
       },
@@ -322,8 +321,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future."
       },
@@ -343,8 +342,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The resource used to fetch the image."
       },
@@ -364,8 +363,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "'100%'",
-            "name": "default"
+            "name": "default",
+            "text": "'100%'"
           }],
         "text": "The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -385,8 +384,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "'100%'",
-            "name": "default"
+            "name": "default",
+            "text": "'100%'"
           }],
         "text": "The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -422,8 +421,8 @@ export class KupImage {
         "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."
           }],
@@ -470,8 +469,8 @@ export class KupImage {
         "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."
           }],