@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -208,8 +208,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 +229,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 +258,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 +282,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 +303,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 +322,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 +370,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

@@ -419,11 +419,15 @@
   transform: none;
   transform-origin: unset;
   transition: height 0.2s;
+  user-select: none;
   will-change: unset;
 }
 .kup-menu.visible {
   display: block;
 }
+.kup-menu .list-item__text {
+  user-select: none;
+}
 
 @keyframes fade-in {
   0% {

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) {
@@ -549,11 +540,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 +569,8 @@ export class KupList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "The data of the list."
       },
@@ -602,8 +593,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 +614,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 +635,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 +656,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 +667,7 @@ export class KupList {
     },
     "keyboardNavigation": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -686,14 +677,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 +698,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 +724,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 +745,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 +766,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 +787,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 +908,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 +978,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 +1003,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."
           }],

package/dist/collection/components/kup-magic-box/kup-magic-box.css

@@ -36,15 +36,15 @@
   display: block;
   height: 300px;
   min-width: 700px;
-  width: 700px;
   overflow: auto;
+  width: 700px;
 }
 
 #kup-component,
 .magic-box-wrapper {
   height: 100%;
-  width: 100%;
   overflow: auto;
+  width: 100%;
 }
 
 .magic-box-wrapper {
@@ -56,11 +56,11 @@
 
 .actions {
   background-color: var(--kup-title-background-color);
-  position: absolute;
-  top: 0;
-  left: 0;
   display: inline-flex;
   justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
   width: 100%;
   z-index: 1;
 }
@@ -81,7 +81,8 @@
 .content {
   box-sizing: border-box;
   height: 100%;
-  padding-top: 52px;
+  margin-top: 52px;
+  transition: background-color 125ms ease;
 }
 
 .empty {
@@ -101,4 +102,8 @@
 .json {
   font-family: var(--kup-font-family-monospace);
   margin: 0;
+}
+
+[kup-drag-over] {
+  background-color: rgba(var(--kup-success-color-rgb), 0.25);
 }

package/dist/collection/components/kup-magic-box/kup-magic-box.js

@@ -1,7 +1,5 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { setKetchupDroppable } from '../../utils/drag-and-drop';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { KupDataTableColumnDragType, KupDataTableRowDragType, } from '../kup-data-table/kup-data-table-declarations';
 import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupMagicBoxProps, MagicBoxDisplay, } from './kup-magic-box-declarations';
@@ -10,6 +8,7 @@ import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declar
 import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../utils/kup-interact/kup-interact-declarations';
 export class KupMagicBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -45,6 +44,7 @@ export class KupMagicBox {
      * Element which enables the drag on move feature.
      */
     this.dragHandler = null;
+    this.wrapperRef = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -215,10 +215,16 @@ export class KupMagicBox {
     this.kupManager.theme.register(this);
   }
   componentDidLoad() {
-    this.rootElement.addEventListener('kup-drop', (e) => this.updateData(e));
+    this.rootElement.addEventListener(kupDropEvent, (e) => this.updateData(e));
     this.dragHandler =
       this.rootElement.shadowRoot.querySelector('#drag-handle');
-    this.kupManager.dialog.register(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dialogify(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dropzone(this.wrapperRef, {
+      accept: `[${kupDraggableColumnAttr}],[${kupDraggableRowAttr}]`,
+    }, {
+      dispatcher: this.rootElement,
+      type: KupDropEventTypes.MAGICBOX,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -228,29 +234,11 @@ export class KupMagicBox {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const handlers = {
-      // Had to define leave and over, otherwise drop wasn't working.
-      onDragLeave: () => { },
-      onDragOver: () => {
-        return true;
-      },
-      onDrop: () => {
-        return KupDataTableRowDragType;
-      },
-    };
     const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
       customStyle ? h("style", null, customStyle) : null,
       h("div", { id: componentWrapperId },
-        h("div", Object.assign({ class: "magic-box-wrapper" }, setKetchupDroppable(handlers, [
-          KupDataTableRowDragType,
-          KupDataTableColumnDragType,
-        ], this.rootElement, {
-          row: null,
-          cell: null,
-          column: null,
-          id: this.rootElement.id,
-        })),
+        h("div", { class: "magic-box-wrapper" },
           h("div", { class: "actions", id: "drag-handle" },
             h("kup-combobox", Object.assign({}, this.comboboxProps())),
             h("kup-button", { styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
@@ -259,10 +247,13 @@ export class KupMagicBox {
             h("kup-button", { id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
               } })),
-          h("div", { class: "content" }, this.setContent())))));
+          h("div", { class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
   }
   disconnectedCallback() {
-    this.kupManager.dialog.unregister([this.rootElement]);
+    this.kupManager.interact.unregister([
+      this.rootElement,
+      this.wrapperRef,
+    ]);
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
   }
@@ -287,11 +278,11 @@ export class KupMagicBox {
       "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."
       },
@@ -301,7 +292,7 @@ export class KupMagicBox {
     },
     "data": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "MagicBoxData",
         "resolved": "MagicBoxData",
@@ -316,8 +307,8 @@ export class KupMagicBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the data that will be used to display different components."
       },
@@ -333,8 +324,8 @@ export class KupMagicBox {
         "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."
           }],
@@ -381,8 +372,8 @@ export class KupMagicBox {
         "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-nav-bar/kup-nav-bar.js

@@ -143,11 +143,11 @@ export class KupNavBar {
       "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."
       },
@@ -172,8 +172,8 @@ export class KupNavBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupNavBarStyling.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "KupNavBarStyling.STANDARD"
           }],
         "text": "Defines the style of the nav bar."
       },
@@ -229,8 +229,8 @@ export class KupNavBar {
         "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."
           }],
@@ -293,8 +293,8 @@ export class KupNavBar {
         "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-paginator/kup-paginator.css

@@ -153,16 +153,19 @@
   width: 4em;
 }
 .f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
+.f-button--wrapper .button.button--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;

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

@@ -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."
       },