@sme.up/ketchup 4.0.0 → 4.2.0-SNAPSHOT

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

@@ -0,0 +1,390 @@
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
+import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupSnackbarProps, snackbarClass } from './kup-snackbar-declarations';
+import { FButton } from '../../f-components/f-button/f-button';
+export class KupSnackbar {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    /**
+     * The value of the component.
+     * @default false
+     */
+    this.visible = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Set of FButton props to set the action button.
+     * @default null
+     */
+    this.actionButton = null;
+    /**
+     * When true, the hide button will be displayed.
+     * @default true
+     */
+    this.closeButton = true;
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * Sets the textual content of the snackbar.
+     * @default ''
+     */
+    this.text = '';
+    /**
+     * Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds.
+     * @default null
+     */
+    this.timeout = null;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+  }
+  onKupActionClick() {
+    this.hide();
+    this.kupActionClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupSnackbarProps, descriptions);
+  }
+  /**
+   * Hides the snackbar.
+   */
+  async hide() {
+    this.visible = false;
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupSnackbarProps, props);
+  }
+  /**
+   * Displays the snackbar.
+   */
+  async show() {
+    this.visible = true;
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    if (this.timeout && this.visible) {
+      setTimeout(() => {
+        this.hide();
+      }, this.timeout);
+    }
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    return (h(Host, { "kup-visible": this.visible },
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId },
+        h("div", { class: snackbarClass },
+          h("div", { class: `${snackbarClass}__text` }, this.text),
+          this.actionButton || this.closeButton ? (h("div", { class: `${snackbarClass}__buttons` },
+            this.actionButton ? (h("div", { class: `${snackbarClass}__action` },
+              h(FButton, Object.assign({}, this.actionButton, { onClick: () => this.onKupActionClick() })))) : null,
+            this.closeButton ? (h("div", { class: `${snackbarClass}__close` },
+              h(FButton, { icon: "close", onClick: () => this.hide() }))) : null)) : null))));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
+  }
+  static get is() { return "kup-snackbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-snackbar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-snackbar.css"]
+  }; }
+  static get properties() { return {
+    "actionButton": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FButtonProps",
+        "resolved": "FButtonProps",
+        "references": {
+          "FButtonProps": {
+            "location": "import",
+            "path": "../../f-components/f-button/f-button-declarations"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Set of FButton props to set the action button."
+      },
+      "defaultValue": "null"
+    },
+    "closeButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "true"
+          }],
+        "text": "When true, the hide button will be displayed."
+      },
+      "attribute": "close-button",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "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": "''"
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }],
+        "text": "Sets the textual content of the snackbar."
+      },
+      "attribute": "text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "timeout": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds."
+      },
+      "attribute": "timeout",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "visible": {}
+  }; }
+  static get events() { return [{
+      "method": "kupActionClick",
+      "name": "kup-snackbar-actionclick",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when action button is clicked."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getProps": {
+      "complexType": {
+        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+        "parameters": [{
+            "tags": [{
+                "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."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<GenericObject>"
+      },
+      "docs": {
+        "text": "Used to retrieve component's props values.",
+        "tags": [{
+            "name": "param",
+            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+          }, {
+            "name": "returns",
+            "text": "List of props as object, each key will be a prop."
+          }]
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the snackbar.",
+        "tags": []
+      }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is used to trigger a new render of the component.",
+        "tags": []
+      }
+    },
+    "setProps": {
+      "complexType": {
+        "signature": "(props: GenericObject) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "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."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the props to the component.",
+        "tags": [{
+            "name": "param",
+            "text": "props - Object containing props that will be set to the component."
+          }]
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Displays the snackbar.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "rootElement"; }
+}

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

@@ -203,9 +203,8 @@ export class KupSpinner {
     else {
       elStyle = Object.assign(Object.assign({}, elStyle), { fontSize: '3px' });
     }
-    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)),
       h("div", { id: componentWrapperId, style: elStyle },
         h("div", { id: "loading-wrapper-master", class: masterClass, style: elStyle },
           h("div", { id: wrapperClass, style: elStyle },
@@ -236,8 +235,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true the spinner is animating."
       },
@@ -257,8 +256,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Decides whether the component is a bar or a spinner."
       },
@@ -278,11 +277,11 @@ export class KupSpinner {
       "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."
       },
@@ -302,8 +301,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Width and height of the spinner. For the bar variant, only height."
       },
@@ -323,8 +322,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Places a blend modal over the wrapper to darken the view (or lighten, when the theme is dark)."
       },
@@ -344,8 +343,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "3500",
-            "name": "default"
+            "name": "default",
+            "text": "3500"
           }],
         "text": "The time required for the \"fader\" to trigger."
       },
@@ -365,8 +364,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true the component will fill the whole viewport."
       },
@@ -386,8 +385,8 @@ export class KupSpinner {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Sets the layout of the spinner."
       },
@@ -423,8 +422,8 @@ export class KupSpinner {
         "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."
           }],
@@ -471,8 +470,8 @@ export class KupSpinner {
         "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-switch/kup-switch.css

@@ -1,159 +1,3 @@
-.f-switch--wrapper {
-  --kup_switch_font_family: var(
-    --kup-switch-font-family,
-    var(--kup-font-family)
-  );
-  --kup_switch_font_size: var(--kup-switch-font-size, var(--kup-font-size));
-  --kup_switch_font_weight: var(--kup-switch-font-weight, 400);
-  --kup_switch_label_color: var(
-    --kup-switch-label-color,
-    var(--kup-text-color)
-  );
-  --kup_switch_primary_color: var(
-    --kup-switch-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_switch_primary_color_rgb: var(
-    --kup-switch-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_switch_thumb_color: var(
-    --kup-switch-thumb-color,
-    var(--kup-border-color)
-  );
-  font-family: var(--kup_switch_font_family);
-  font-size: var(--kup_switch_font_size);
-}
-.f-switch--wrapper .form-field {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-size: 0.875em;
-  line-height: 2em;
-  font-weight: var(--kup_switch_font_weight);
-  letter-spacing: 0.0178571429em;
-  color: var(--kup_switch_label_color);
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-.f-switch--wrapper .form-field.form-field--align-end > label {
-  margin-left: auto;
-  margin-right: 0px;
-  padding-left: 0px;
-  padding-right: 4px;
-  order: -1 !important;
-}
-.f-switch--wrapper .form-field > label {
-  color: var(--kup_switch_label_color);
-  font-family: var(--kup-font-family);
-  margin-left: 0px;
-  margin-right: auto;
-  padding-left: 4px;
-  padding-right: 0px;
-  order: 0;
-}
-.f-switch--wrapper .form-field .switch {
-  display: inline-block;
-  position: relative;
-  outline: none;
-  user-select: none;
-  margin: 0 0.75em;
-}
-.f-switch--wrapper .form-field .switch .switch__track {
-  box-sizing: border-box;
-  width: 36px;
-  height: 14px;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  opacity: 0.38;
-  transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.f-switch--wrapper .form-field .switch .switch__thumb-underlay {
-  border-radius: 50%;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  transform: translateX(0);
-  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-  left: -14px;
-  right: initial;
-  top: -16px;
-  width: 48px;
-  height: 48px;
-}
-.f-switch--wrapper .form-field .switch .switch__thumb-underlay:hover {
-  background-color: rgba(var(--kup_switch_primary_color_rgb), 0.125);
-}
-.f-switch--wrapper .form-field .switch .switch__thumb-underlay .switch__thumb {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  border: 10px solid;
-  border-radius: 50%;
-  z-index: 1;
-  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.f-switch--wrapper .form-field .switch .switch__thumb-underlay .switch__thumb .switch__native-control {
-  left: 0;
-  right: initial;
-  position: absolute;
-  top: 0;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-  transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
-  width: 64px;
-  height: 48px;
-}
-.f-switch--wrapper .form-field .switch:not(.switch--checked) .switch__track {
-  background-color: var(--kup_switch_label_color);
-}
-.f-switch--wrapper .form-field .switch:not(.switch--checked) .switch__thumb {
-  background-color: var(--kup_switch_thumb_color);
-  border-color: var(--kup_switch_thumb_color);
-}
-.f-switch--wrapper .form-field .switch.switch--disabled {
-  cursor: auto;
-  opacity: 0.5;
-  pointer-events: none;
-}
-.f-switch--wrapper .form-field .switch.switch--checked .switch__track {
-  background-color: var(--kup_switch_primary_color);
-  opacity: 0.54;
-}
-.f-switch--wrapper .form-field .switch.switch--checked .switch__thumb-underlay {
-  transform: translateX(16px);
-}
-.f-switch--wrapper .form-field .switch.switch--checked .switch__thumb {
-  background-color: var(--kup_switch_primary_color);
-  border-color: var(--kup_switch_primary_color);
-}
-.f-switch--wrapper .form-field .switch.switch--checked .switch__thumb .switch__native-control {
-  transform: translateX(-16px);
-}
-.f-switch--wrapper.kup-danger {
-  --kup-switch-primary-color: var(--kup-danger-color);
-  --kup-switch-primary-color-rgb: var(--kup-danger-color-rgb);
-}
-.f-switch--wrapper.kup-info {
-  --kup-switch-primary-color: var(--kup-info-color);
-  --kup-switch-primary-color-rgb: var(--kup-info-color-rgb);
-}
-.f-switch--wrapper.kup-secondary {
-  --kup-switch-primary-color: var(--kup-secondary-color);
-  --kup-switch-primary-color-rgb: var(--kup-secondary-color-rgb);
-}
-.f-switch--wrapper.kup-success {
-  --kup-switch-primary-color: var(--kup-success-color);
-  --kup-switch-primary-color-rgb: var(--kup-success-color-rgb);
-}
-.f-switch--wrapper.kup-warning {
-  --kup-switch-primary-color: var(--kup-warning-color);
-  --kup-switch-primary-color-rgb: var(--kup-warning-color-rgb);
-}
-
 /**
 * NOTE: These variables are used in the related f-component.
 *