@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -123,9 +123,8 @@ export class KupDrawer {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { "kup-opened": this.opened },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { class: "backdrop", onPointerDown: () => this.close() }),
       h("div", { id: componentWrapperId },
         h("div", { class: drawerClass }, this.content()))));
@@ -154,11 +153,11 @@ export class KupDrawer {
       "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."
       },
@@ -253,8 +252,8 @@ export class KupDrawer {
         "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."
           }],
@@ -336,8 +335,8 @@ export class KupDrawer {
         "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-dropdown-button/kup-dropdown-button.css

@@ -1,338 +1,10 @@
-.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 {
+:host {
   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;
+  width: max-content;
 }
 
-.f-button--wrapper {
-  --kup_button_border_radius: var(--kup-button-border-radius, 4px);
-  --kup_button_disabled_color: var(
-    --kup-button-disabled-color,
-    var(--kup-disabled-color)
-  );
-  --kup_button_font_family: var(
-    --kup-button-font-family,
-    var(--kup-font-family)
-  );
-  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
-  --kup_button_font_weight: var(--kup-button-font-weight, 400);
-  --kup_button_height: var(--kup-button-height, 3em);
-  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
-  --kup_button_primary_color: var(
-    --kup-button-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_button_primary_color_h: var(
-    --kup-button-primary-color-h,
-    var(--kup-primary-color-h)
-  );
-  --kup_button_primary_color_s: var(
-    --kup-button-primary-color-s,
-    var(--kup-primary-color-s)
-  );
-  --kup_button_primary_color_l: var(
-    --kup-button-primary-color-l,
-    var(--kup-primary-color-l)
-  );
-  --kup_button_primary_color_rgb: var(
-    --kup-button-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup-spinner-color: var(--kup_button_primary_color);
-  font-family: var(--kup_button_font_family);
-  font-size: var(--kup_button_font_size);
-}
-.f-button--wrapper .button {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-appearance: none;
-  -webkit-font-smoothing: antialiased;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--kup_button_border_radius);
-  box-sizing: border-box;
-  color: var(--kup_button_primary_color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 0.775em;
-  font-weight: var(--kup_button_font_weight);
-  height: var(--kup_button_height);
-  justify-content: center;
-  letter-spacing: 0.0892857143em;
-  line-height: inherit;
-  min-width: 64px;
-  outline: none;
-  overflow: visible;
-  padding: var(--kup_button_padding);
+#kup-component {
   position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color 80ms linear, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  user-select: none;
-  vertical-align: middle;
-}
-.f-button--wrapper .button:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button .button__icon {
-  margin-left: -0.25em;
-  margin-right: 0.75em;
-}
-.f-button--wrapper .button .button__label + .button__icon {
-  margin-left: 0.75em;
-  margin-right: -0.25em;
-}
-.f-button--wrapper .button.button--floating, .f-button--wrapper .button.button--raised {
-  --kup-spinner-color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:not(.button--disabled), .f-button--wrapper .button.button--raised:not(.button--disabled) {
-  --kup-spinner-border-color: hsl(
-    var(--kup_button_primary_color_h),
-    calc(var(--kup_button_primary_color_s) * 0.75),
-    calc(var(--kup_button_primary_color_l) * 0.85)
-  );
-  background-color: var(--kup_button_primary_color);
-  color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--raised:hover {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.93), calc(var(--kup_button_primary_color_l) * 1.07));
-}
-.f-button--wrapper .button.button--floating:focus, .f-button--wrapper .button.button--raised:focus {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.88), calc(var(--kup_button_primary_color_l) * 1.12));
-}
-.f-button--wrapper .button.button--floating.button--disabled, .f-button--wrapper .button.button--raised.button--disabled {
-  background-color: var(--kup-disabled-background-color);
-  box-shadow: none;
-}
-.f-button--wrapper .button.button--floating {
-  border-radius: 24px;
-  box-shadow: 0 0.215em 0.35em -1px rgba(var(--kup-text-color-rgb), 0.2), 0 0.43em 0.71em 0 rgba(var(--kup-text-color-rgb), 0.14), 0 0.07em 1.285em 0 rgba(var(--kup-text-color-rgb), 0.12);
-  font-weight: 500;
-  font-size: 1em;
-  height: 3.4em;
-  width: auto;
-  padding: 0 1.5em;
-}
-.f-button--wrapper .button.button--floating.button--no-label {
-  border-radius: 50%;
-  height: 4em;
-  padding: 0;
-  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);
-}
-.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);
-}
-.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);
-}
-.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--outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-.f-button--wrapper .button.button--outlined:not(.button--disabled) {
-  border-color: var(--kup_button_primary_color);
-  background-color: transparent;
-  color: var(--kup_button_primary_color);
-}
-.f-button--wrapper .button.button--outlined:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button.button--outlined:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button.button--outlined.button--disabled {
-  opacity: 0.75;
-  border-color: var(--kup_button_disabled_color);
-}
-.f-button--wrapper .button.button--no-label {
-  min-width: unset;
-  padding: 0 0.5em;
-}
-.f-button--wrapper .button.button--no-label .button__icon {
-  margin: 0;
-}
-.f-button--wrapper .button.button--disabled {
-  color: var(--kup_button_disabled_color);
-  cursor: auto;
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .button .button__spinner-container {
-  width: 100%;
-  height: var(--kup_button_spinner_height);
-  left: 0;
-  position: absolute;
-}
-.f-button--wrapper .icon-button {
-  background-color: transparent;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  font-size: var(--kup_button_font_size);
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  padding: 0.75em;
-  border-radius: 50%;
-}
-.f-button--wrapper .icon-button:hover, .f-button--wrapper .icon-button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .icon-button .icon-button__icon {
-  display: flex;
-  margin: auto;
-}
-.f-button--wrapper .icon-button .icon-button__icon.icon-button__icon--on {
-  display: none;
-}
-.f-button--wrapper .icon-button.button--disabled {
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .icon-button .icon-button__spinner-container {
-  width: var(--kup_button_spinner_width);
-  height: var(--kup_button_spinner_height);
-}
-.f-button--wrapper .button--with-spinner {
-  opacity: 0.8;
-  pointer-events: none;
-}
-.f-button--wrapper .content--hidden {
-  visibility: hidden;
-}
-.f-button--wrapper.kup-full-height {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-height .button {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-width {
-  width: 100%;
-}
-.f-button--wrapper.kup-full-width .button {
-  width: 100%;
-}
-.f-button--wrapper.kup-large button {
-  font-size: 1.25em;
-}
-.f-button--wrapper.kup-shaped .button {
-  border-radius: 18px;
-}
-.f-button--wrapper.kup-shaped .button.button--floating {
-  border-radius: 50% 0;
-}
-.f-button--wrapper.kup-slim button {
-  font-size: 0.675em;
-}
-.f-button--wrapper.kup-pulsating .icon-button--on:after {
-  content: "";
-  animation: pulsating 1250ms infinite;
-  position: absolute;
-  height: 2px;
-  width: 2px;
-  top: calc(50% - 1px);
-  left: calc(50% - 1px);
-  border-radius: 50%;
-}
-.f-button--wrapper.kup-danger {
-  --kup-button-primary-color: var(--kup-danger-color);
-  --kup-button-primary-color-h: var(--kup-danger-color-h);
-  --kup-button-primary-color-s: var(--kup-danger-color-s);
-  --kup-button-primary-color-l: var(--kup-danger-color-l);
-  --kup-button-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-info {
-  --kup-button-primary-color: var(--kup-info-color);
-  --kup-button-primary-color-h: var(--kup-info-color-h);
-  --kup-button-primary-color-s: var(--kup-info-color-s);
-  --kup-button-primary-color-l: var(--kup-info-color-l);
-  --kup-button-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-secondary {
-  --kup-button-primary-color: var(--kup-secondary-color);
-  --kup-button-primary-color-h: var(--kup-secondary-color-h);
-  --kup-button-primary-color-s: var(--kup-secondary-color-s);
-  --kup-button-primary-color-l: var(--kup-secondary-color-l);
-  --kup-button-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-button-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-.f-button--wrapper.kup-success {
-  --kup-button-primary-color: var(--kup-success-color);
-  --kup-button-primary-color-h: var(--kup-success-color-h);
-  --kup-button-primary-color-s: var(--kup-success-color-s);
-  --kup-button-primary-color-l: var(--kup-success-color-l);
-  --kup-button-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-warning {
-  --kup-button-primary-color: var(--kup-warning-color);
-  --kup-button-primary-color-h: var(--kup-warning-color-h);
-  --kup-button-primary-color-s: var(--kup-warning-color-s);
-  --kup-button-primary-color-l: var(--kup-warning-color-l);
-  --kup-button-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-
-@keyframes pulsating {
-  0% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0.7);
-  }
-  70% {
-    transform: scale(2.75);
-    box-shadow: 0 0 0 10px rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-  100% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-}
-:host {
-  display: block;
-  width: max-content;
 }
 
 .dropdown-button--wrapper {
@@ -340,37 +12,37 @@
   flex-direction: row;
 }
 
-.f-button--wrapper.dropdown-button__primary-action .button {
+.f-button.dropdown-button__primary-action .button {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.f-button--wrapper.dropdown-button__primary-action .button.button--outlined {
+.f-button.dropdown-button__primary-action .button.button--outlined {
   border-right: none;
 }
 
-.f-button--wrapper.dropdown-button__dropdown-action.dropdown-only .button {
+.f-button.dropdown-button__dropdown-action.dropdown-only .button {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 
-.f-button--wrapper.dropdown-button__dropdown-action .button {
+.f-button.dropdown-button__dropdown-action .button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 }
-.f-button--wrapper.dropdown-button__dropdown-action .button .button__icon {
+.f-button.dropdown-button__dropdown-action .button .button__icon {
   transition: transform 80ms linear;
 }
-.f-button--wrapper.dropdown-button__dropdown-action .button.button--raised {
+.f-button.dropdown-button__dropdown-action .button.button--raised {
   box-shadow: 0px 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.125), 0px 2px 2px 0px rgba(var(--kup-text-color-rgb), 0.1), 0px 1px 5px 0px rgba(var(--kup-text-color-rgb), 0.075), var(--kup-text-on-primary-color) -2px 0px 2px -2px;
 }
-.f-button--wrapper.dropdown-button__dropdown-action .button.button--disabled {
+.f-button.dropdown-button__dropdown-action .button.button--disabled {
   box-shadow: none;
 }
-.f-button--wrapper.dropdown-button__dropdown-action .button.button--outlined {
+.f-button.dropdown-button__dropdown-action .button.button--outlined {
   border-left: none;
 }
-.f-button--wrapper.dropdown-button__dropdown-action .button.toggled .button__icon {
+.f-button.dropdown-button__dropdown-action .button.toggled .button__icon {
   transform: rotate(180deg);
 }
 

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

@@ -2,12 +2,12 @@ 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';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupDropdownButton {
   constructor() {
     /*-------------------------------------------------*/
@@ -92,10 +92,7 @@ export class KupDropdownButton {
      * List element (dropdown menu).
      */
     this.listEl = null;
-    /**
-     * List anchor point.
-     */
-    this.wrapperEl = null;
+    this.clickCb = null;
   }
   /**
    * Handles the navigation of the dropdown menu with the keyboard.
@@ -249,10 +246,25 @@ 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;
+    const elStyle = this.listEl.style;
     elStyle.height = 'auto';
     elStyle.minWidth = buttonWidth + 'px';
+    if (this.kupManager.dynamicPosition.isRegistered(this.listEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.listEl, this.buttonEl ? this.buttonEl : this.dropdownEl);
+    }
+    else {
+      this.kupManager.dynamicPosition.register(this.listEl, this.buttonEl ? this.buttonEl : this.dropdownEl, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.listEl);
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.closeList();
+        },
+        el: this.listEl,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
   }
   /**
    * Closes the dropdown menu.
@@ -263,6 +275,7 @@ export class KupDropdownButton {
     this.dropdownEl.classList.remove('toggled');
     this.listEl.menuVisible = false;
     this.kupManager.dynamicPosition.stop(this.listEl);
+    this.kupManager.removeClickCallback(this.clickCb);
   }
   /**
    * Checks the consistency of the list.
@@ -297,7 +310,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() {
@@ -325,19 +337,18 @@ export class KupDropdownButton {
     return buttons;
   }
   render() {
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { onBlur: () => this.onKupBlur() },
-      customStyle ? h("style", null, customStyle) : null,
-      h("div", { id: componentWrapperId, ref: (el) => (this.wrapperEl = el) },
+    return (h(Host, null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      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));
+    if (this.listEl) {
+      this.kupManager.dynamicPosition.unregister([this.listEl]);
+      this.listEl.remove();
     }
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-dropdown-button"; }
   static get encapsulation() { return "shadow"; }
@@ -360,11 +371,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 +399,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Props of the sub-components."
       },
@@ -407,8 +418,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 +444,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 +465,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 +486,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 +507,8 @@ export class KupDropdownButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component."
       },
@@ -517,8 +528,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 +554,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 +580,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 +601,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 +721,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 +785,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."
           }],