@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -178,9 +178,8 @@ export class KupLazy {
       content = resource;
       className += ' kup-to-be-loaded';
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { class: className },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId }, content)));
   }
   disconnectedCallback() {
@@ -208,8 +207,8 @@ export class KupLazy {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the tag name of the component to be lazy loaded."
       },
@@ -229,11 +228,11 @@ export class KupLazy {
       "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."
       },
@@ -258,8 +257,8 @@ export class KupLazy {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the data of the component to be lazy loaded."
       },
@@ -282,8 +281,8 @@ export class KupLazy {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupLazyRender.BOTH",
-            "name": "default"
+            "name": "default",
+            "text": "KupLazyRender.BOTH"
           }],
         "text": "Decides when the sub-component should be rendered.\nBy default when both the component props exist and the component is in the viewport."
       },
@@ -303,8 +302,8 @@ export class KupLazy {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "Displays an animated SVG placeholder until the component is loaded."
       },
@@ -322,8 +321,8 @@ export class KupLazy {
         "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."
           }],
@@ -370,8 +369,8 @@ export class KupLazy {
         "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-list/kup-list-declarations.js

@@ -10,7 +10,7 @@ export var KupListProps;
   KupListProps["filter"] = "Keeps string for filtering elements when filter mode is active";
   KupListProps["hideText"] = "Hides rows' text, ideally to display a list of icons only.";
   KupListProps["isMenu"] = "Defines whether the list is a menu or not.";
-  KupListProps["keyboardNavigation"] = "When true, enables items' navigation through keys. Defaults to false when the component's isMenu prop is set to true.";
+  KupListProps["keyboardNavigation"] = "When true, enables items' navigation through arrow keys.";
   KupListProps["menuVisible"] = "Sets the status of the menu, when false it's hidden otherwise it's visible.";
   KupListProps["roleType"] = "Defines the type of selection. Values accepted: listbox, radiogroup or group.";
   KupListProps["selectable"] = "Defines whether items are selectable or not.";

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

@@ -1,249 +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-checkbox--wrapper {
-  --kup_checkbox_font_family: var(
-    --kup-checkbox-font-family,
-    var(--kup-font-family)
-  );
-  --kup_checkbox_font_size: var(--kup-checkbox-font-size, var(--kup-font-size));
-  --kup_checkbox_font_weight: var(--kup-checkbox-font-weight, 400);
-  --kup_checkbox_disabled_checkmark_color: var(
-    --kup-checkbox-disabled-checkmark-color,
-    var(--kup-background-color)
-  );
-  --kup_checkbox_padding: var(--kup-checkbox-padding, 11px);
-  --kup_checkbox_primary_color: var(
-    --kup-checkbox-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_checkbox_primary_color_rgb: var(
-    --kup-checkbox-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_checkbox_text_color: var(
-    --kup-checkbox-text-color,
-    var(--kup-text-color)
-  );
-  --kup_checkbox_text_color_rgb: var(
-    --kup-checkbox-text-color-rgb,
-    var(--kup-text-color-rgb)
-  );
-  --kup_checkbox_text_on_primary_color: var(
-    --kup-checkbox-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup_checkbox_text_on_primary_color_rgb: var(
-    --kup-checkbox-text-on-primary-color-rgb,
-    var(--kup-text-on-primary-color-rgb)
-  );
-  font-family: var(--kup_checkbox_font_family);
-  font-size: var(--kup_checkbox_font_size);
-}
-.f-checkbox--wrapper .form-field {
-  color: var(--kup_checkbox_text_color);
-  line-height: 1.25em;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: 0.0178571429em;
-  text-decoration: inherit;
-  align-items: center;
-  vertical-align: middle;
-  display: inline-flex;
-}
-.f-checkbox--wrapper .form-field label {
-  font-size: 0.875em;
-  margin-left: 0px;
-  margin-right: auto;
-  order: 0;
-}
-.f-checkbox--wrapper .form-field.form-field--align-end label {
-  margin-left: auto;
-  margin-right: 0px;
-  order: -1;
-}
-.f-checkbox--wrapper .checkbox {
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  flex: 0 0 18px;
-  box-sizing: content-box;
-  width: 18px;
-  height: 18px;
-  line-height: 0;
-  white-space: nowrap;
-  cursor: pointer;
-  vertical-align: bottom;
-  will-change: transform, opacity;
-  z-index: 0;
-  padding: var(--kup_checkbox_padding);
-  transition: background-color 125ms linear;
-}
-.f-checkbox--wrapper .checkbox:hover {
-  background: rgba(var(--kup_checkbox_primary_color_rgb), 0.125);
-}
-.f-checkbox--wrapper .checkbox .checkbox__native-control {
-  position: absolute;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  cursor: inherit;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  width: 40px;
-}
-.f-checkbox--wrapper .checkbox .checkbox__native-control:checked ~ .checkbox__background .checkbox__checkmark {
-  transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox .checkbox__checkmark-path {
-  stroke: var(--kup_checkbox_text_on_primary_color);
-  stroke-dasharray: 29.7833385;
-  stroke-dashoffset: 29.7833385;
-  stroke-width: 3.12px;
-  transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background {
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 18px;
-  height: 18px;
-  border: 2px solid rgba(var(--kup_checkbox_text_color_rgb), 0.5);
-  border-radius: 2px;
-  background-color: transparent;
-  pointer-events: none;
-  will-change: background-color, border-color;
-  transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background .checkbox__checkmark {
-  color: var(--kup_checkbox_text_on_primary_color);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  opacity: 0;
-  transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox .checkbox__background .checkbox__mixedmark {
-  position: absolute;
-  top: 6px;
-  left: -1px;
-  color: var(--kup_checkbox_text_on_primary_color);
-  width: 100%;
-  height: 0;
-  border-width: 1px;
-  border-style: solid;
-  opacity: 0;
-  transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-}
-.f-checkbox--wrapper .checkbox.checkbox--checked .checkbox__background {
-  background-color: var(--kup_checkbox_primary_color);
-  border-color: var(--kup_checkbox_primary_color);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox.checkbox--checked .checkbox__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__background {
-  background-color: var(--kup_checkbox_primary_color);
-  border-color: var(--kup_checkbox_primary_color);
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__mixedmark {
-  border-color: var(--kup_checkbox_text_on_primary_color);
-  transform: scaleX(1) rotate(0deg);
-  opacity: 1;
-}
-.f-checkbox--wrapper .checkbox.checkbox--indeterminate .checkbox__checkmark-path {
-  stroke-dashoffset: 0;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled {
-  pointer-events: none;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled + label {
-  pointer-events: none;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled .checkbox__background {
-  background-color: transparent;
-  border-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325);
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__background {
-  background-color: rgba(var(--kup_checkbox_text_color_rgb), 0.325);
-  border-color: transparent;
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__checkmark {
-  color: var(--kup_checkbox_disabled_checkmark_color);
-}
-.f-checkbox--wrapper .checkbox.checkbox--disabled.checkbox--checked .checkbox__mixedmark {
-  color: var(--kup_checkbox_disabled_checkmark_color);
-}
-.f-checkbox--wrapper.kup-danger {
-  --kup-checkbox-primary-color: var(--kup-danger-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-info {
-  --kup-checkbox-primary-color: var(--kup-info-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-secondary {
-  --kup-checkbox-primary-color: var(--kup-secondary-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-checkbox-text-on-primary-color: var(--kup-text-on-secondary-color);
-  --kup-checkbox-text-on-primary-color-rgb: var(
-    --kup-text-on-secondary-color-rgb
-  );
-}
-.f-checkbox--wrapper.kup-success {
-  --kup-checkbox-primary-color: var(--kup-success-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-.f-checkbox--wrapper.kup-warning {
-  --kup-checkbox-primary-color: var(--kup-warning-color);
-  --kup-checkbox-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-checkbox-text-on-primary-color: white;
-  --kup-checkbox-text-on-primary-color-rgb: 255, 255, 255;
-}
-
 /**
 * @prop --kup-list-background: Sets background of the list.
 * @prop --kup-list-color: Sets text color of the list.
@@ -419,26 +173,16 @@
   transform: none;
   transform-origin: unset;
   transition: height 0.2s;
+  user-select: none;
   will-change: unset;
 }
 .kup-menu.visible {
   display: block;
 }
-
-@keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: block;
-    opacity: 0;
-  }
-  100% {
-    display: block;
-    opacity: 1;
-  }
+.kup-menu .list-item__text {
+  user-select: none;
 }
+
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/

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

@@ -57,11 +57,10 @@ export class KupList {
      */
     this.isMenu = false;
     /**
-     * When true, enables items' navigation through keys.
-     * Defaults to false when the component's isMenu prop is set to true.
-     * @default undefined
+     * When true, enables items' navigation through arrow keys.
+     * @default true
      */
-    this.keyboardNavigation = undefined;
+    this.keyboardNavigation = true;
     /**
      * Sets the status of the menu, when false it's hidden otherwise it's visible.
      * @default false
@@ -457,14 +456,6 @@ export class KupList {
   componentWillLoad() {
     this.kupManager.debug.logLoad(this, false);
     this.kupManager.theme.register(this);
-    if (this.keyboardNavigation === undefined) {
-      if (this.isMenu) {
-        this.keyboardNavigation = false;
-      }
-      else {
-        this.keyboardNavigation = true;
-      }
-    }
     for (let index = 0; index < this.data.length; index++) {
       const el = this.data[index];
       if (el.selected) {
@@ -517,9 +508,8 @@ export class KupList {
     this.filteredItems = [];
     this.radios = [];
     let index = 0;
-    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: "kup-component", class: wrapperClass },
         h("ul", { class: componentClass, role: roleAttr, id: 'kup-list_' + this.rootElement.id, "aria-multiselectable": ariaMultiSelectable }, this.data
           .filter((item) => this.itemCompliant(item))
@@ -549,11 +539,11 @@ export class KupList {
       "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."
       },
@@ -578,8 +568,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "The data of the list."
       },
@@ -602,8 +592,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "ItemsDisplayMode.DESCRIPTION",
-            "name": "default"
+            "name": "default",
+            "text": "ItemsDisplayMode.DESCRIPTION"
           }],
         "text": "Selects how the items must display their label and how they can be filtered for."
       },
@@ -623,8 +613,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "''",
-            "name": "default"
+            "name": "default",
+            "text": "''"
           }],
         "text": "Keeps string for filtering elements when filter mode is active"
       },
@@ -644,8 +634,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Hides rows' text, ideally to display a list of icons only."
       },
@@ -665,8 +655,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defines whether the list is a menu or not."
       },
@@ -676,7 +666,7 @@ export class KupList {
     },
     "keyboardNavigation": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -686,14 +676,14 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
-        "text": "When true, enables items' navigation through keys.\nDefaults to false when the component's isMenu prop is set to true."
+        "text": "When true, enables items' navigation through arrow keys."
       },
       "attribute": "keyboard-navigation",
       "reflect": false,
-      "defaultValue": "undefined"
+      "defaultValue": "true"
     },
     "menuVisible": {
       "type": "boolean",
@@ -707,8 +697,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets the status of the menu, when false it's hidden otherwise it's visible."
       },
@@ -733,8 +723,8 @@ export class KupList {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "KupListRole.LISTBOX",
-            "name": "default"
+            "name": "default",
+            "text": "KupListRole.LISTBOX"
           }],
         "text": "Defines the type of selection. Values accepted: listbox, radiogroup or group."
       },
@@ -754,8 +744,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "Defines whether items are selectable or not."
       },
@@ -775,8 +765,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Displays the icons associated to each row when set to true."
       },
@@ -796,8 +786,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "The list elements descriptions will be arranged in two lines."
       },
@@ -917,8 +907,8 @@ export class KupList {
         "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."
           }],
@@ -987,8 +977,8 @@ export class KupList {
         "signature": "(index?: number) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element.",
-                "name": "param"
+                "name": "param",
+                "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
               }],
             "text": "- Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
           }],
@@ -1012,8 +1002,8 @@ export class KupList {
         "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."
           }],