@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -216,8 +216,8 @@ export class KupCard {
       const card = this.rootElement;
       const dragHandle = root.querySelector('#' + KupCardIds.DRAG_HANDLE);
       const unresizable = !!root.querySelector('.' + KupCardCSSClasses.DIALOG_UNRESIZABLE);
-      if (!this.kupManager.dialog.isRegistered(card)) {
-        this.kupManager.dialog.register(card, dragHandle ? dragHandle : null, unresizable);
+      if (!this.kupManager.interact.isRegistered(card)) {
+        this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
       }
     }
   }
@@ -390,10 +390,10 @@ export class KupCard {
       h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
   }
   disconnectedCallback() {
+    this.kupManager.interact.unregister([this.rootElement]);
     this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-    this.kupManager.dialog.unregister([this.rootElement]);
     this.kupManager.resize.unobserve(this.rootElement);
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-card"; }
   static get encapsulation() { return "shadow"; }
@@ -416,11 +416,11 @@ export class KupCard {
       "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."
       },
@@ -445,8 +445,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The actual data of the card."
       },
@@ -464,8 +464,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defines whether the card is a menu or not.\nWorks together with menuVisible."
       },
@@ -490,8 +490,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupCardFamily.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "KupCardFamily.STANDARD"
           }],
         "text": "Sets the type of the card."
       },
@@ -511,8 +511,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "1",
-            "name": "default"
+            "name": "default",
+            "text": "1"
           }],
         "text": "Sets the number of the layout."
       },
@@ -532,8 +532,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets the status of the card as menu, when false it's hidden otherwise it's visible.\nWorks together with isMenu."
       },
@@ -553,8 +553,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
       },
@@ -574,8 +574,8 @@ export class KupCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -631,8 +631,8 @@ export class KupCard {
         "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."
           }],
@@ -695,8 +695,8 @@ export class KupCard {
         "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-chart/kup-chart.js

@@ -539,8 +539,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Sets the chart to a 2D or 3D aspect. 3D only works for Pie graphs."
       },
@@ -559,8 +559,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Sets the axis of the chart."
       },
@@ -584,8 +584,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Title of the graph."
       }
@@ -602,8 +602,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "Colors of the chart."
       },
@@ -621,11 +621,11 @@ export class KupChart {
       "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."
       },
@@ -650,8 +650,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The actual data of the chart."
       }
@@ -673,8 +673,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Customize the hAxis."
       }
@@ -711,8 +711,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"right\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"right\""
           }],
         "text": "Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work."
       },
@@ -737,8 +737,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Renders charts without the Google API and using jQuery Sparkline."
       },
@@ -761,8 +761,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The data series to be displayed. They must be of the same type."
       }
@@ -779,8 +779,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Displays the numerical values."
       },
@@ -800,8 +800,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
       },
@@ -821,8 +821,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"100%\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"100%\""
           }],
         "text": "The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -847,8 +847,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Used to sort series."
       },
@@ -889,8 +889,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[ChartType.Hbar]",
-            "name": "default"
+            "name": "default",
+            "text": "[ChartType.Hbar]"
           }],
         "text": "The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar."
       },
@@ -933,8 +933,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "Customize the vAxis."
       }
@@ -971,8 +971,8 @@ export class KupChart {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"45.2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"45.2\""
           }],
         "text": "Google chart version to load"
       },
@@ -1008,8 +1008,8 @@ export class KupChart {
         "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."
           }],
@@ -1072,8 +1072,8 @@ export class KupChart {
         "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-checkbox/kup-checkbox.js

@@ -195,8 +195,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component will be set to 'checked'."
       },
@@ -216,11 +216,11 @@ export class KupCheckbox {
       "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."
       },
@@ -240,8 +240,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component is disabled."
       },
@@ -261,8 +261,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component will be set to 'indeterminate'."
       },
@@ -282,8 +282,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When specified, its content will be shown as a label."
       },
@@ -303,8 +303,8 @@ export class KupCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the label will be on the left of the component."
       },
@@ -383,8 +383,8 @@ export class KupCheckbox {
         "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."
           }],
@@ -431,8 +431,8 @@ export class KupCheckbox {
         "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-chip/kup-chip.css

@@ -83,7 +83,6 @@
   border-width: 0;
   outline: none;
   cursor: pointer;
-  will-change: transform, opacity;
   margin: var(--kup_chip_margin);
 }
 .f-chip--wrapper .chip-set .chip .chip__icon--leading {

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

@@ -237,11 +237,11 @@ export class KupChip {
       "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."
       },
@@ -266,8 +266,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "List of elements."
       },
@@ -290,8 +290,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "List of elements."
       },
@@ -314,8 +314,8 @@ export class KupChip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FChipType.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "FChipType.STANDARD"
           }],
         "text": "The type of chip. Available types: input, filter, choice or empty for default."
       },
@@ -411,8 +411,8 @@ export class KupChip {
         "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."
           }],
@@ -459,8 +459,8 @@ export class KupChip {
         "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-color-picker/kup-color-picker.css

@@ -2645,20 +2645,19 @@
   background: currentColor;
 }
 
-.picker_wrapper.popup[kup-dynamic-position]:not(.kup-dynamic-position-active) {
-  display: none;
-}
-
 .picker_done,
 .picker_arrow {
   display: none;
 }
 
 .layout_default.picker_wrapper {
-  top: unset;
-  left: unset;
   bottom: unset;
+  font-size: var(--kup-font-size);
+  left: unset;
+  padding: 0.25em;
   right: unset;
+  top: unset;
+  width: var(--kup_colorpicker_picker_width, 25em);
 }
 
 .layout_default .picker_editor input {
@@ -2668,9 +2667,7 @@
   font-size: var(--kup-font-size);
 }
 
-.picker_wrapper.popup,
-.picker_wrapper.popup .picker_arrow::before,
-.picker_wrapper.popup .picker_arrow::after {
+.picker_wrapper.popup {
   box-shadow: var(--kup-box-shadow);
   margin: 0;
   outline: none;