@sme.up/ketchup 4.0.0 → 4.1.0

package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js

@@ -2,7 +2,6 @@ import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop,
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { ItemsDisplayMode } from '../kup-list/kup-list-declarations';
 import { consistencyCheck } from '../kup-list/kup-list-helper';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupDropdownButtonProps, } from './kup-dropdown-button-declarations';
 import { FButtonStyling, } from '../../f-components/f-button/f-button-declarations';
 import { FButton } from '../../f-components/f-button/f-button';
@@ -92,10 +91,6 @@ export class KupDropdownButton {
      * List element (dropdown menu).
      */
     this.listEl = null;
-    /**
-     * List anchor point.
-     */
-    this.wrapperEl = null;
   }
   /**
    * Handles the navigation of the dropdown menu with the keyboard.
@@ -249,10 +244,16 @@ export class KupDropdownButton {
     (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.classList.add('toggled');
     this.dropdownEl.classList.add('toggled');
     this.listEl.menuVisible = true;
-    this.kupManager.dynamicPosition.start(this.listEl);
     let elStyle = this.listEl.style;
     elStyle.height = 'auto';
     elStyle.minWidth = buttonWidth + 'px';
+    this.kupManager.utilities.pointerDownCallbacks.add({
+      cb: () => {
+        this.closeList();
+      },
+      onlyOnce: true,
+      el: this.listEl,
+    });
   }
   /**
    * Closes the dropdown menu.
@@ -262,7 +263,6 @@ export class KupDropdownButton {
     (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.classList.remove('toggled');
     this.dropdownEl.classList.remove('toggled');
     this.listEl.menuVisible = false;
-    this.kupManager.dynamicPosition.stop(this.listEl);
   }
   /**
    * Checks the consistency of the list.
@@ -297,7 +297,6 @@ export class KupDropdownButton {
       this.buttonEl = root.querySelector('.dropdown-button__primary-action');
       this.dropdownEl = root.querySelector('.dropdown-button__dropdown-action');
     }
-    this.kupManager.dynamicPosition.register(this.listEl, this.wrapperEl);
     this.kupManager.debug.logRender(this, true);
   }
   renderButtons() {
@@ -326,18 +325,14 @@ export class KupDropdownButton {
   }
   render() {
     const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { onBlur: () => this.onKupBlur() },
+    return (h(Host, null,
       customStyle ? h("style", null, customStyle) : null,
-      h("div", { id: componentWrapperId, ref: (el) => (this.wrapperEl = el) },
+      h("div", { id: componentWrapperId },
         h("div", { class: "dropdown-button--wrapper" }, this.renderButtons()),
-        h("kup-list", Object.assign({}, this.data['kup-list'], { displayMode: this.displayMode, isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), id: this.rootElement.id + '_list', ref: (el) => (this.listEl = el), tabindex: -1 })))));
+        h("kup-list", Object.assign({}, this.data['kup-list'], { displayMode: this.displayMode, isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), id: this.rootElement.id + '_list', ref: (el) => (this.listEl = el) })))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
-    }
   }
   static get is() { return "kup-dropdown-button"; }
   static get encapsulation() { return "shadow"; }
@@ -360,11 +355,11 @@ export class KupDropdownButton {
       "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."
       },
@@ -388,8 +383,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Props of the sub-components."
       },
@@ -407,8 +402,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -433,8 +428,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "ItemsDisplayMode.DESCRIPTION",
-            "name": "default"
+            "name": "default",
+            "text": "ItemsDisplayMode.DESCRIPTION"
           }],
         "text": "Sets how to show the selected item value. Suported values: \"code\", \"description\", \"both\"."
       },
@@ -454,8 +449,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Default value is false. When set to true, the arrow dropdown button is the only button displayed."
       },
@@ -475,8 +470,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "icon",
-            "name": "default"
+            "name": "default",
+            "text": "icon"
           }],
         "text": "Defaults at null. When set, the button will show this icon."
       },
@@ -496,8 +491,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component."
       },
@@ -517,8 +512,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Defaults at null. When set, the button will show this text."
       },
@@ -543,8 +538,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "ItemsDisplayMode.CODE",
-            "name": "default"
+            "name": "default",
+            "text": "ItemsDisplayMode.CODE"
           }],
         "text": "Sets how to return the selected item value. Suported values: \"code\", \"description\", \"both\"."
       },
@@ -569,8 +564,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FButtonStyling.RAISED",
-            "name": "default"
+            "name": "default",
+            "text": "FButtonStyling.RAISED"
           }],
         "text": "Defines the style of the button. Styles available: \"flat\", \"outlined\" and \"raised\" which is also the default."
       },
@@ -590,8 +585,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at null. When set, the icon will be shown after the text."
       },
@@ -710,8 +705,8 @@ export class KupDropdownButton {
         "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."
           }],
@@ -774,8 +769,8 @@ export class KupDropdownButton {
         "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-field/kup-field.js

@@ -236,11 +236,11 @@ export class KupField {
       "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."
       },
@@ -264,8 +264,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{}",
-            "name": "default"
+            "name": "default",
+            "text": "{}"
           }],
         "text": "Effective data to pass to the component."
       },
@@ -283,8 +283,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "The text of the label. If set to empty or has only white space chars, the label will be removed."
       },
@@ -304,8 +304,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"left\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"left\""
           }],
         "text": "Sets the label's position, left right or top."
       },
@@ -325,8 +325,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets whether the submit button must be displayed or not."
       },
@@ -346,8 +346,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the submit button's label."
       },
@@ -367,8 +367,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"right\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"right\""
           }],
         "text": "Sets the submit button's position, top right bottom or left."
       },
@@ -388,8 +388,8 @@ export class KupField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "undefined",
-            "name": "default"
+            "name": "default",
+            "text": "undefined"
           }],
         "text": "The type of the FLD"
       },
@@ -467,8 +467,8 @@ export class KupField {
         "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."
           }],

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

@@ -398,11 +398,11 @@ export class KupGauge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "kup-gauge.arcThickness",
-            "name": "namespace"
+            "name": "namespace",
+            "text": "kup-gauge.arcThickness"
           }, {
-            "text": "kup-gauge.size",
-            "name": "see"
+            "name": "see",
+            "text": "kup-gauge.size"
           }],
         "text": "Sets how much the arc of the gauge should be thick."
       },
@@ -438,11 +438,11 @@ export class KupGauge {
       "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."
       },
@@ -676,11 +676,11 @@ export class KupGauge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "kup-gauge.size",
-            "name": "namespace"
+            "name": "namespace",
+            "text": "kup-gauge.size"
           }, {
-            "text": "kup-gauge.arcThickness",
-            "name": "see"
+            "name": "see",
+            "text": "kup-gauge.arcThickness"
           }],
         "text": "Con be used change the viewbox of the SVG.\nBy manipulating this value, some customizations of the aspect of the gauge is achievable."
       },
@@ -749,8 +749,8 @@ export class KupGauge {
         "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."
           }],
@@ -797,8 +797,8 @@ export class KupGauge {
         "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-grid/kup-grid.css

@@ -31,10 +31,11 @@
   grid-template-columns: repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr));
 }
 .layout-grid .layout-grid__inner .layout-grid__cell {
+  box-sizing: border-box;
   display: flex;
+  justify-content: center;
   margin: 0px;
   width: auto;
-  box-sizing: border-box;
 }
 .layout-grid__cell--span-1 {
   grid-column-end: span 1;

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

@@ -131,8 +131,8 @@ export class KupGrid {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "12",
-            "name": "default"
+            "name": "default",
+            "text": "12"
           }],
         "text": "The number of columns displayed by the grid, the default behavior is 12."
       },
@@ -152,11 +152,11 @@ export class KupGrid {
       "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."
       },
@@ -176,8 +176,8 @@ export class KupGrid {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, forces the content on a single line."
       },
@@ -192,8 +192,8 @@ export class KupGrid {
         "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."
           }],
@@ -240,8 +240,8 @@ export class KupGrid {
         "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-iframe/kup-iframe.js

@@ -208,8 +208,8 @@ export class KupIframe {
         "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."
           }],
@@ -256,8 +256,8 @@ export class KupIframe {
         "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-image/kup-image.js

@@ -213,8 +213,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the data of badges."
       },
@@ -232,8 +232,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupThemeColorValues.ICON",
-            "name": "default"
+            "name": "default",
+            "text": "KupThemeColorValues.ICON"
           }],
         "text": "The color of the icon, defaults to the CSS variable KupThemeColorValues.ICON."
       },
@@ -253,11 +253,11 @@ export class KupImage {
       "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."
       },
@@ -282,8 +282,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information."
       },
@@ -301,8 +301,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs."
       },
@@ -322,8 +322,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future."
       },
@@ -343,8 +343,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The resource used to fetch the image."
       },
@@ -364,8 +364,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "'100%'",
-            "name": "default"
+            "name": "default",
+            "text": "'100%'"
           }],
         "text": "The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -385,8 +385,8 @@ export class KupImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "'100%'",
-            "name": "default"
+            "name": "default",
+            "text": "'100%'"
           }],
         "text": "The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
       },
@@ -422,8 +422,8 @@ export class KupImage {
         "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."
           }],
@@ -470,8 +470,8 @@ export class KupImage {
         "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."
           }],