@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, forceUpdate, h, Method, Prop, } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
 import { PaginatorMode, } from './kup-paginator-declarations';
 import { isNumber } from '../../utils/utils';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
@@ -7,6 +7,12 @@ import { KupLanguagePage, KupLanguageRow, } from '../../utils/kup-language/kup-l
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupPaginator {
   constructor() {
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
     this.currentPage = 1;
     this.max = 0;
     this.mode = PaginatorMode.FULL;
@@ -192,17 +198,19 @@ export class KupPaginator {
       'kup-list': listDataRows,
       'kup-text-field': textfieldDataRows,
     };
-    let compCreated = (h("div", { id: componentWrapperId },
-      h("div", { class: "align-left" },
-        h("div", { class: "nav-section" },
-          h(FButton, { icon: "chevron_left", disabled: this.isPrevPageDisabled(), wrapperClass: "prev-page", onClick: () => this.onPrevPage() }),
-          h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: this.currentPage.toString(), "onkup-combobox-itemclick": (e) => this.onPageChange(e), "onkup-combobox-textfieldsubmit": (e) => this.onPageChange(e), "onkup-combobox-blur": (e) => this.onPageChange(e), ref: (el) => (this.comboPageSelectorEl = el) }),
-          h(FButton, { icon: "chevron_right", disabled: this.isNextPageDisabled(), wrapperClass: "next-page", onClick: () => this.onNextPage() })),
-        h("div", { class: "tot-section" },
-          h("slot", { name: "more-results" }),
-          h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: this.perPage.toString(), "onkup-combobox-itemclick": (e) => this.onRowsPerPage(e), "onkup-combobox-textfieldsubmit": (e) => this.onRowsPerPage(e), "onkup-combobox-blur": (e) => this.onRowsPerPage(e), ref: (el) => (this.comboRowsSelectorEl = el) }),
-          h("slot", { name: "right" }))),
-      h("div", { class: "align-left" })));
+    let compCreated = (h(Host, null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId },
+        h("div", { class: "align-left" },
+          h("div", { class: "nav-section" },
+            h(FButton, { icon: "chevron_left", disabled: this.isPrevPageDisabled(), wrapperClass: "prev-page", onClick: () => this.onPrevPage() }),
+            h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: this.currentPage.toString(), "onkup-combobox-itemclick": (e) => this.onPageChange(e), "onkup-combobox-textfieldsubmit": (e) => this.onPageChange(e), "onkup-combobox-blur": (e) => this.onPageChange(e), ref: (el) => (this.comboPageSelectorEl = el) }),
+            h(FButton, { icon: "chevron_right", disabled: this.isNextPageDisabled(), wrapperClass: "next-page", onClick: () => this.onNextPage() })),
+          h("div", { class: "tot-section" },
+            h("slot", { name: "more-results" }),
+            h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: this.perPage.toString(), "onkup-combobox-itemclick": (e) => this.onRowsPerPage(e), "onkup-combobox-textfieldsubmit": (e) => this.onRowsPerPage(e), "onkup-combobox-blur": (e) => this.onRowsPerPage(e), ref: (el) => (this.comboRowsSelectorEl = el) }),
+            h("slot", { name: "right" }))),
+        h("div", { class: "align-left" }))));
     return compCreated;
   }
   disconnectedCallback() {
@@ -217,6 +225,30 @@ export class KupPaginator {
     "$": ["kup-paginator.css"]
   }; }
   static get properties() { return {
+    "customStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+          }],
+        "text": "Custom style of the component."
+      },
+      "attribute": "custom-style",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "currentPage": {
       "type": "number",
       "mutable": false,

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

@@ -269,7 +269,7 @@ export class KupProbe {
   render() {
     let customStyle = null;
     if (this.features.theme) {
-      customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
+      customStyle = this.kupManager.theme.setKupStyle(this.rootElement);
     }
     return (h(Host, null,
       customStyle ? h("style", null, customStyle) : null,
@@ -298,11 +298,11 @@ export class KupProbe {
       "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."
       },
@@ -322,11 +322,11 @@ export class KupProbe {
       "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": "Specify features to test."
       },

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

@@ -191,9 +191,8 @@ export class KupProgressBar {
         h("div", { class: "progress-bar-percentage", style: valueStyle },
           h("span", { style: labelStyle }, label))));
     }
-    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 }, el)));
   }
   disconnectedCallback() {
@@ -220,8 +219,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "Displays the label in the middle of the progress bar. It's the default for the radial variant and can't be changed."
       },
@@ -241,11 +240,11 @@ export class KupProgressBar {
       "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."
       },
@@ -265,8 +264,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Flag to show or hide the progress bar's label."
       },
@@ -286,8 +285,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Specifies an icon to replace the label."
       },
@@ -307,8 +306,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Specifies a text for the bar's label."
       },
@@ -328,8 +327,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Radial version."
       },
@@ -349,8 +348,8 @@ export class KupProgressBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "0",
-            "name": "default"
+            "name": "default",
+            "text": "0"
           }],
         "text": "The current value the progress bar must display."
       },
@@ -365,8 +364,8 @@ export class KupProgressBar {
         "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."
           }],
@@ -413,8 +412,8 @@ export class KupProgressBar {
         "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-radio/kup-radio.js

@@ -150,9 +150,8 @@ export class KupRadio {
       'radio-wrapper': true,
       'radio-wrapper--grid': hasColumns ? true : false,
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     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 }, radioList))));
   }
@@ -180,8 +179,8 @@ export class KupRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Number of columns. When null, radio fields will be displayed inline."
       },
@@ -201,11 +200,11 @@ export class KupRadio {
       "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."
       },
@@ -230,8 +229,8 @@ export class KupRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "List of elements."
       },
@@ -249,8 +248,8 @@ export class KupRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -270,8 +269,8 @@ export class KupRadio {
       "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."
       },
@@ -350,8 +349,8 @@ export class KupRadio {
         "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."
           }],
@@ -398,8 +397,8 @@ export class KupRadio {
         "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-rating/kup-rating.js

@@ -125,9 +125,8 @@ export class KupRating {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    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", null, this.stars))));
   }
@@ -155,11 +154,11 @@ export class KupRating {
       "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."
       },
@@ -179,8 +178,8 @@ export class KupRating {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -200,8 +199,8 @@ export class KupRating {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "5",
-            "name": "default"
+            "name": "default",
+            "text": "5"
           }],
         "text": "Max number of stars (default 5)."
       },
@@ -221,8 +220,8 @@ export class KupRating {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "0",
-            "name": "default"
+            "name": "default",
+            "text": "0"
           }],
         "text": "Rated stars."
       },
@@ -261,8 +260,8 @@ export class KupRating {
         "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."
           }],
@@ -309,8 +308,8 @@ export class KupRating {
         "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-snackbar/kup-snackbar-declarations.js

@@ -0,0 +1,13 @@
+export const snackbarClass = 'snackbar';
+/**
+ * Props of the kup-snackbar component.
+ * Used to export every prop in an object.
+ */
+export var KupSnackbarProps;
+(function (KupSnackbarProps) {
+  KupSnackbarProps["actionButton"] = "Set of FButton props to set the action button.";
+  KupSnackbarProps["closeButton"] = "When true, the hide button will be displayed.";
+  KupSnackbarProps["customStyle"] = "Custom style of the component.";
+  KupSnackbarProps["text"] = "Sets the textual content of the snackbar.";
+  KupSnackbarProps["timeout"] = "Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds.";
+})(KupSnackbarProps || (KupSnackbarProps = {}));

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

@@ -0,0 +1,75 @@
+:host {
+  animation: snackbar-show 125ms;
+  bottom: 0;
+  box-sizing: border-box;
+  display: block;
+  left: 0;
+  outline: none;
+  position: fixed;
+  transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
+  width: 100%;
+  z-index: calc(var(--kup-navbar-zindex) + 1);
+}
+
+:host(:not([kup-visible])) {
+  display: none;
+}
+
+#kup-component {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 8px;
+  width: 100%;
+}
+
+.snackbar {
+  align-items: center;
+  background: var(--kup-navbar-background-color);
+  border-radius: 5px;
+  box-shadow: var(--kup-box-shadow);
+  color: var(--kup-navbar-color);
+  display: flex;
+  justify-content: flex-start;
+  max-width: 672px;
+  min-height: 48px;
+  min-width: 344px;
+}
+.snackbar__text {
+  padding: 14px 16px;
+  white-space: nowrap;
+}
+.snackbar__buttons {
+  --kup-button-primary-color: var(--kup-navbar-color);
+  --kup-button-primary-color-rgb: var(--kup-navbar-color-rgb);
+  --kup-button-primary-color-h: var(--kup-navbar-color-h);
+  --kup-button-primary-color-s: var(--kup-navbar-color-s);
+  --kup-button-primary-color-l: var(--kup-navbar-color-l);
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 8px;
+  width: 100%;
+}
+.snackbar__close {
+  --kup-button-font-size: 11px;
+  margin-left: 8px;
+}
+
+@keyframes snackbar-show {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/*-------------------------------------------------*/
+/*        C o m p o n e n t   C l a s s e s        */
+/*-------------------------------------------------*/
+:host(.kup-top) {
+  bottom: unset;
+  top: var(--kup-navbar-height, 0);
+}