@sme.up/ketchup 9.1.0 → 9.3.0

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

@@ -17,808 +17,808 @@ import { layoutSpecificEvents } from "./kup-card-helper";
 import { getProps, setProps } from "../../utils/utils";
 import { componentWrapperId } from "../../variables/GenericVariables";
 export class KupCard {
-  constructor() {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        /**
+         * kup-card-event callback.
+         */
+        this.cardEvent = (e) => {
+            e.stopPropagation();
+            this.onKupEvent(e);
+        };
+        /**
+         * Instance of the KupManager class.
+         */
+        this.kupManager = kupManagerInstance();
+        /**
+         * Prevents multiple scaling callbacks when the card is scalable.
+         */
+        this.scalingActive = false;
+        this.componentWrapper = null;
+        this.colorPicker = null;
+        this.firstColorPickerChange = true;
+        this.customStyle = '';
+        this.data = null;
+        this.isMenu = false;
+        this.layoutFamily = KupCardFamily.STANDARD;
+        this.layoutNumber = 1;
+        this.menuVisible = false;
+        this.sizeX = '100%';
+        this.sizeY = '100%';
+    }
+    onKupClick(id, value) {
+        this.kupClick.emit({
+            comp: this,
+            id: id,
+            value: value,
+        });
+    }
+    onKupClose(id) {
+        this.kupClose.emit({
+            comp: this,
+            id: id,
+        });
+        this.rootElement.remove();
+    }
+    onKupEvent(e) {
+        layoutSpecificEvents(this, e);
+        this.kupEvent.emit({
+            comp: this,
+            id: this.rootElement.id,
+            event: e,
+        });
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * kup-card-event callback.
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
      */
-    this.cardEvent = (e) => {
-      e.stopPropagation();
-      this.onKupEvent(e);
-    };
+    async getProps(descriptions) {
+        return getProps(this, KupCardProps, descriptions);
+    }
     /**
-     * Instance of the KupManager class.
+     * This method is used to trigger a new render of the component.
      */
-    this.kupManager = kupManagerInstance();
+    async refresh() {
+        forceUpdate(this);
+    }
     /**
-     * Prevents multiple scaling callbacks when the card is scalable.
+     * This method is invoked by KupManager whenever the component changes size.
      */
-    this.scalingActive = false;
-    this.componentWrapper = null;
-    this.colorPicker = null;
-    this.firstColorPickerChange = true;
-    this.customStyle = '';
-    this.data = null;
-    this.isMenu = false;
-    this.layoutFamily = KupCardFamily.STANDARD;
-    this.layoutNumber = 1;
-    this.menuVisible = false;
-    this.sizeX = '100%';
-    this.sizeY = '100%';
-  }
-  onKupClick(id, value) {
-    this.kupClick.emit({
-      comp: this,
-      id: id,
-      value: value,
-    });
-  }
-  onKupClose(id) {
-    this.kupClose.emit({
-      comp: this,
-      id: id,
-    });
-    this.rootElement.remove();
-  }
-  onKupEvent(e) {
-    layoutSpecificEvents(this, e);
-    this.kupEvent.emit({
-      comp: this,
-      id: this.rootElement.id,
-      event: e,
-    });
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupCardProps, descriptions);
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * This method is invoked by KupManager whenever the component changes size.
-   */
-  async resizeCallback() {
-    window.clearTimeout(this.resizeTimeout);
-    this.resizeTimeout = window.setTimeout(() => {
-      this.layoutManager();
-    }, 300);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupCardProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  /**
-   * Set the events of the component.
-   */
-  setEvents() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      // The dialog "X" button.
-      const dialogClose = root.querySelector('#' + KupCardIds.DIALOG_CLOSE);
-      if (dialogClose) {
-        dialogClose.onclick = () => this.onKupClose(KupCardIds.DIALOG_CLOSE);
-      }
-      // When an element can be clicked. Ideally anchors/links.
-      const links = root.querySelectorAll('.' + KupCardCSSClasses.CLICKABLE_LINK);
-      for (let index = 0; index < links.length; index++) {
-        const link = links[index];
-        link.onclick = (e) => {
-          e.stopPropagation();
-          this.onKupClick(link.id, null);
-        };
-      }
+    async resizeCallback() {
+        window.clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = window.setTimeout(() => {
+            this.layoutManager();
+        }, 300);
     }
-  }
-  /**
-   * This method is invoked by the layout manager when the layout family is collapsible.
-   * When the card is not expanded and the collapsible content fits the wrapper, the bottom bar won't be displayed.
-   */
-  collapsible() {
-    const root = this.rootElement.shadowRoot;
-    const el = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_ELEMENT);
-    const card = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_CARD);
-    const wrapper = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_WRAPPER);
-    if (!card.classList.contains(KupCardCSSClasses.EXPANDED)) {
-      if (el.clientHeight > wrapper.clientHeight) {
-        if (!card.classList.contains(KupCardCSSClasses.COLLAPSIBLE_ACTIVE)) {
-          card.classList.add(KupCardCSSClasses.COLLAPSIBLE_ACTIVE);
-        }
-      }
-      else {
-        if (card.classList.contains(KupCardCSSClasses.COLLAPSIBLE_ACTIVE)) {
-          card.classList.remove(KupCardCSSClasses.COLLAPSIBLE_ACTIVE);
-        }
-      }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupCardProps, props);
     }
-  }
-  /**
-   * This method will return the virtual node of the card, selecting the correct layout through layoutFamily and layoutNumber.
-   * @returns {VNode} Virtual node of the card for the specified family layout and number.
-   */
-  getLayout() {
-    const family = this.layoutFamily.toLowerCase();
-    const method = 'create' + this.layoutNumber;
-    try {
-      switch (family) {
-        case KupCardFamily.BOX: {
-          return boxLayouts[method](this);
-        }
-        case KupCardFamily.BUILT_IN: {
-          return builtInLayouts[method](this);
-        }
-        case KupCardFamily.COLLAPSIBLE: {
-          return collapsibleLayouts[method](this);
-        }
-        case KupCardFamily.DIALOG: {
-          return dialogLayouts[method](this);
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    /**
+     * Set the events of the component.
+     */
+    setEvents() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            // The dialog "X" button.
+            const dialogClose = root.querySelector('#' + KupCardIds.DIALOG_CLOSE);
+            if (dialogClose) {
+                dialogClose.onclick = () => this.onKupClose(KupCardIds.DIALOG_CLOSE);
+            }
+            // When an element can be clicked. Ideally anchors/links.
+            const links = root.querySelectorAll('.' + KupCardCSSClasses.CLICKABLE_LINK);
+            for (let index = 0; index < links.length; index++) {
+                const link = links[index];
+                link.onclick = (e) => {
+                    e.stopPropagation();
+                    this.onKupClick(link.id, null);
+                };
+            }
         }
-        case KupCardFamily.FREE: {
-          return freeLayouts[method](this);
+    }
+    /**
+     * This method is invoked by the layout manager when the layout family is collapsible.
+     * When the card is not expanded and the collapsible content fits the wrapper, the bottom bar won't be displayed.
+     */
+    collapsible() {
+        const root = this.rootElement.shadowRoot;
+        const el = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_ELEMENT);
+        const card = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_CARD);
+        const wrapper = root.querySelector('.' + KupCardCSSClasses.COLLAPSIBLE_WRAPPER);
+        if (!card.classList.contains(KupCardCSSClasses.EXPANDED)) {
+            if (el.clientHeight > wrapper.clientHeight) {
+                if (!card.classList.contains(KupCardCSSClasses.COLLAPSIBLE_ACTIVE)) {
+                    card.classList.add(KupCardCSSClasses.COLLAPSIBLE_ACTIVE);
+                }
+            }
+            else {
+                if (card.classList.contains(KupCardCSSClasses.COLLAPSIBLE_ACTIVE)) {
+                    card.classList.remove(KupCardCSSClasses.COLLAPSIBLE_ACTIVE);
+                }
+            }
         }
-        case KupCardFamily.SCALABLE: {
-          return scalableLayouts[method](this);
+    }
+    /**
+     * This method will return the virtual node of the card, selecting the correct layout through layoutFamily and layoutNumber.
+     * @returns {VNode} Virtual node of the card for the specified family layout and number.
+     */
+    getLayout() {
+        const family = this.layoutFamily.toLowerCase();
+        const method = 'create' + this.layoutNumber;
+        try {
+            switch (family) {
+                case KupCardFamily.BOX: {
+                    return boxLayouts[method](this);
+                }
+                case KupCardFamily.BUILT_IN: {
+                    return builtInLayouts[method](this);
+                }
+                case KupCardFamily.COLLAPSIBLE: {
+                    return collapsibleLayouts[method](this);
+                }
+                case KupCardFamily.DIALOG: {
+                    return dialogLayouts[method](this);
+                }
+                case KupCardFamily.FREE: {
+                    return freeLayouts[method](this);
+                }
+                case KupCardFamily.SCALABLE: {
+                    return scalableLayouts[method](this);
+                }
+                default:
+                case KupCardFamily.STANDARD: {
+                    return standardLayouts[method](this);
+                }
+            }
         }
-        default:
-        case KupCardFamily.STANDARD: {
-          return standardLayouts[method](this);
+        catch (error) {
+            this.kupManager.debug.logMessage(this, error, KupDebugCategory.WARNING);
+            let props = {
+                resource: 'warning',
+                title: this.kupManager.language.translate(KupLanguageGeneric.LAYOUT_NYI) + '!',
+            };
+            return h(FImage, Object.assign({}, props));
         }
-      }
-    }
-    catch (error) {
-      this.kupManager.debug.logMessage(this, error, KupDebugCategory.WARNING);
-      let props = {
-        resource: 'warning',
-        title: this.kupManager.language.translate(KupLanguageGeneric.LAYOUT_NYI) + '!',
-      };
-      return h(FImage, Object.assign({}, props));
-    }
-  }
-  /**
-   * This method is invoked by the layout manager when the layout family is dialog.
-   * It will "dialogify" the card.
-   */
-  dialog() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      const card = this.rootElement;
-      const dragHandle = root.querySelector('#' + KupCardIds.DRAG_HANDLE);
-      const unresizable = !!root.querySelector('.' + KupCardCSSClasses.DIALOG_UNRESIZABLE);
-      if (!this.kupManager.interact.isRegistered(card)) {
-        this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
-      }
     }
-  }
-  /**
-   * This method is invoked by the layout manager when the layout family is built-in.
-   */
-  builtIn() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      const builtinLayout = root.querySelector('.' + KupCardCSSClasses.BUILT_IN_CARD);
-      switch (this.layoutNumber) {
-        case 4:
-          const colorPickerOptions = this.data && this.data.options
-            ? this.data.options
-            : null;
-          const color = colorPickerOptions
-            ? colorPickerOptions.initialValue
-            : null;
-          if (!this.colorPicker) {
-            this.colorPicker = new Picker({
-              alpha: false,
-              color: color,
-              parent: builtinLayout,
-              popup: false,
-              onChange: colorPickerOptions &&
-                colorPickerOptions.changeCb
-                ? (color) => {
-                  if (!this.firstColorPickerChange) {
-                    colorPickerOptions.changeCb(color);
-                  }
-                  this.firstColorPickerChange = false;
-                }
-                : null,
-            });
-            if (colorPickerOptions &&
-              colorPickerOptions.creationCb) {
-              colorPickerOptions.creationCb(this.colorPicker);
+    /**
+     * This method is invoked by the layout manager when the layout family is dialog.
+     * It will "dialogify" the card.
+     */
+    dialog() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            const card = this.rootElement;
+            const dragHandle = root.querySelector('#' + KupCardIds.DRAG_HANDLE);
+            const unresizable = !!root.querySelector('.' + KupCardCSSClasses.DIALOG_UNRESIZABLE);
+            if (!this.kupManager.interact.isRegistered(card)) {
+                this.kupManager.interact.dialogify(card, dragHandle ? dragHandle : null, unresizable);
             }
-          }
-          break;
-      }
+        }
     }
-  }
-  /**
-   * This method will trigger whenever the card's render() hook occurs or when the size changes (through KupManager), in order to manage the more complex layout families.
-   * It will also update any dynamic color handled by the selected layout.
-   */
-  layoutManager() {
-    const root = this.rootElement.shadowRoot;
-    if (this.componentWrapper) {
-      const family = this.layoutFamily.toLowerCase();
-      const dynColors = root.querySelectorAll('.dyn-color');
-      for (let index = 0; index < dynColors.length; index++) {
-        this.rootElement.style.setProperty('--kup_card_dynamic_color_' + index, this.kupManager.theme.colorContrast(window.getComputedStyle(dynColors[index])
-          .backgroundColor));
-      }
-      switch (family) {
-        case KupCardFamily.COLLAPSIBLE:
-          this.collapsible();
-          break;
-        case KupCardFamily.DIALOG:
-          this.dialog();
-          break;
-        case KupCardFamily.BUILT_IN:
-          this.builtIn();
-          break;
-        case KupCardFamily.SCALABLE:
-          if (!this.scalingActive) {
-            this.scalable();
-          }
-          break;
-        default:
-          break;
-      }
+    /**
+     * This method is invoked by the layout manager when the layout family is built-in.
+     */
+    builtIn() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            const builtinLayout = root.querySelector('.' + KupCardCSSClasses.BUILT_IN_CARD);
+            switch (this.layoutNumber) {
+                case 4:
+                    const colorPickerOptions = this.data && this.data.options
+                        ? this.data.options
+                        : null;
+                    const color = colorPickerOptions
+                        ? colorPickerOptions.initialValue
+                        : null;
+                    if (!this.colorPicker) {
+                        this.colorPicker = new Picker({
+                            alpha: false,
+                            color: color,
+                            parent: builtinLayout,
+                            popup: false,
+                            onChange: colorPickerOptions &&
+                                colorPickerOptions.changeCb
+                                ? (color) => {
+                                    if (!this.firstColorPickerChange) {
+                                        colorPickerOptions.changeCb(color);
+                                    }
+                                    this.firstColorPickerChange = false;
+                                }
+                                : null,
+                        });
+                        if (colorPickerOptions &&
+                            colorPickerOptions.creationCb) {
+                            colorPickerOptions.creationCb(this.colorPicker);
+                        }
+                    }
+                    break;
+            }
+        }
     }
-  }
-  /**
-   * Sets the event listeners on the sub-components, in order to properly emit the generic kup-card-event.
-   */
-  registerListeners() {
-    const root = this.rootElement.shadowRoot;
-    root.addEventListener('kup-autocomplete-blur', this.cardEvent);
-    root.addEventListener('kup-autocomplete-change', this.cardEvent);
-    root.addEventListener('kup-autocomplete-input', this.cardEvent);
-    root.addEventListener('kup-autocomplete-itemclick', this.cardEvent);
-    root.addEventListener('kup-button-click', this.cardEvent);
-    root.addEventListener('kup-checkbox-change', this.cardEvent);
-    root.addEventListener('kup-chip-blur', this.cardEvent);
-    root.addEventListener('kup-chip-click', this.cardEvent);
-    root.addEventListener('kup-chip-iconclick', this.cardEvent);
-    root.addEventListener('kup-combobox-change', this.cardEvent);
-    root.addEventListener('kup-combobox-itemclick', this.cardEvent);
-    root.addEventListener('kup-datatable-cellupdate', this.cardEvent);
-    root.addEventListener('kup-datatable-rowselected', this.cardEvent);
-    root.addEventListener('kup-datepicker-cleariconclick', this.cardEvent);
-    root.addEventListener('kup-datepicker-input', this.cardEvent);
-    root.addEventListener('kup-datepicker-itemclick', this.cardEvent);
-    root.addEventListener('kup-datepicker-textfieldsubmit', this.cardEvent);
-    root.addEventListener('kup-dropdownbutton-itemclick', this.cardEvent);
-    root.addEventListener('kup-list-click', this.cardEvent);
-    root.addEventListener('kup-switch-change', this.cardEvent);
-    root.addEventListener('kup-tabbar-click', this.cardEvent);
-    root.addEventListener('kup-textfield-cleariconclick', this.cardEvent);
-    root.addEventListener('kup-textfield-change', this.cardEvent);
-    root.addEventListener('kup-textfield-input', this.cardEvent);
-    root.addEventListener('kup-textfield-submit', this.cardEvent);
-    root.addEventListener('kup-timepicker-cleariconclick', this.cardEvent);
-    root.addEventListener('kup-timepicker-input', this.cardEvent);
-    root.addEventListener('kup-timepicker-itemclick', this.cardEvent);
-    root.addEventListener('kup-timepicker-textfieldsubmit', this.cardEvent);
-    root.addEventListener('kup-tree-dynamicmassexpansion', this.cardEvent);
-    root.addEventListener('kup-tree-buttonclick', this.cardEvent);
-    root.addEventListener('kup-tree-didunload', this.cardEvent);
-    root.addEventListener('kup-tree-nodecollapse', this.cardEvent);
-    root.addEventListener('kup-tree-nodedblclick', this.cardEvent);
-    root.addEventListener('kup-tree-nodeexpand', this.cardEvent);
-    root.addEventListener('kup-tree-nodeselected', this.cardEvent);
-  }
-  /**
-   * This method is invoked by the layout manager when the layout family is scalable.
-   * The content of the card (.scalable-element) will be resized to fit the wrapper (kup-card).
-   * The scaling is performed by using a CSS variable (--kup_card_scalable_multiplier) which will impact the card's font-size.
-   * When there is empty space, the multiplier will be increased, as will the content.
-   * Viceversa, when the content exceeds the boundaries, the multiplier will be decreased.
-   */
-  async scalable() {
-    this.scalingActive = true;
-    const root = this.rootElement.shadowRoot;
-    const el = root.querySelector('.scalable-element');
-    const card = this.rootElement;
     /**
-     * cardHeight sets the maximum height of the content, when exceeded the multiplier will be reduced (90%).
+     * This method will trigger whenever the card's render() hook occurs or when the size changes (through KupManager), in order to manage the more complex layout families.
+     * It will also update any dynamic color handled by the selected layout.
      */
-    const cardHeight = (90 / 100) * card.clientHeight;
+    layoutManager() {
+        const root = this.rootElement.shadowRoot;
+        if (this.componentWrapper) {
+            const family = this.layoutFamily.toLowerCase();
+            const dynColors = root.querySelectorAll('.dyn-color');
+            for (let index = 0; index < dynColors.length; index++) {
+                this.rootElement.style.setProperty('--kup_card_dynamic_color_' + index, this.kupManager.theme.colorContrast(window.getComputedStyle(dynColors[index])
+                    .backgroundColor));
+            }
+            switch (family) {
+                case KupCardFamily.COLLAPSIBLE:
+                    this.collapsible();
+                    break;
+                case KupCardFamily.DIALOG:
+                    this.dialog();
+                    break;
+                case KupCardFamily.BUILT_IN:
+                    this.builtIn();
+                    break;
+                case KupCardFamily.SCALABLE:
+                    if (!this.scalingActive) {
+                        this.scalable();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
     /**
-     * cardWidthLow and cardWidthHigh will set the boundaries in which the component must fit (85% - 95%).
+     * Sets the event listeners on the sub-components, in order to properly emit the generic kup-card-event.
      */
-    const cardWidthLow = (85 / 100) * card.clientWidth;
-    const cardWidthHigh = (95 / 100) * card.clientWidth;
-    const multiplierStep = 0.1;
-    let tooManyAttempts = 75;
-    let multiplier = 1;
-    let redrawCount = 0;
-    const redraw = async () => {
-      card.style.setProperty('--kup_card_scalable_multiplier', multiplier.toFixed(1) + '');
-      this.kupManager.debug.logMessage(this, 'Redrawing scalable card (' + ++redrawCount + ').', KupDebugCategory.INFO);
-    };
-    const roundMultiplier = (m) => {
-      return parseFloat(m.toFixed(1));
-    };
-    card.style.opacity = '0';
-    card.style.transition = 'opacity 125ms ease-in';
+    registerListeners() {
+        const root = this.rootElement.shadowRoot;
+        root.addEventListener('kup-autocomplete-blur', this.cardEvent);
+        root.addEventListener('kup-autocomplete-change', this.cardEvent);
+        root.addEventListener('kup-autocomplete-input', this.cardEvent);
+        root.addEventListener('kup-autocomplete-itemclick', this.cardEvent);
+        root.addEventListener('kup-button-click', this.cardEvent);
+        root.addEventListener('kup-checkbox-change', this.cardEvent);
+        root.addEventListener('kup-chip-blur', this.cardEvent);
+        root.addEventListener('kup-chip-click', this.cardEvent);
+        root.addEventListener('kup-chip-iconclick', this.cardEvent);
+        root.addEventListener('kup-combobox-change', this.cardEvent);
+        root.addEventListener('kup-combobox-itemclick', this.cardEvent);
+        root.addEventListener('kup-datatable-cellupdate', this.cardEvent);
+        root.addEventListener('kup-datatable-rowselected', this.cardEvent);
+        root.addEventListener('kup-datepicker-cleariconclick', this.cardEvent);
+        root.addEventListener('kup-datepicker-input', this.cardEvent);
+        root.addEventListener('kup-datepicker-itemclick', this.cardEvent);
+        root.addEventListener('kup-datepicker-textfieldsubmit', this.cardEvent);
+        root.addEventListener('kup-dropdownbutton-itemclick', this.cardEvent);
+        root.addEventListener('kup-list-click', this.cardEvent);
+        root.addEventListener('kup-switch-change', this.cardEvent);
+        root.addEventListener('kup-tabbar-click', this.cardEvent);
+        root.addEventListener('kup-textfield-cleariconclick', this.cardEvent);
+        root.addEventListener('kup-textfield-change', this.cardEvent);
+        root.addEventListener('kup-textfield-input', this.cardEvent);
+        root.addEventListener('kup-textfield-submit', this.cardEvent);
+        root.addEventListener('kup-timepicker-cleariconclick', this.cardEvent);
+        root.addEventListener('kup-timepicker-input', this.cardEvent);
+        root.addEventListener('kup-timepicker-itemclick', this.cardEvent);
+        root.addEventListener('kup-timepicker-textfieldsubmit', this.cardEvent);
+        root.addEventListener('kup-tree-dynamicmassexpansion', this.cardEvent);
+        root.addEventListener('kup-tree-buttonclick', this.cardEvent);
+        root.addEventListener('kup-tree-didunload', this.cardEvent);
+        root.addEventListener('kup-tree-nodecollapse', this.cardEvent);
+        root.addEventListener('kup-tree-nodedblclick', this.cardEvent);
+        root.addEventListener('kup-tree-nodeexpand', this.cardEvent);
+        root.addEventListener('kup-tree-nodeselected', this.cardEvent);
+    }
     /**
-     * Cycle to adjust the width.
+     * This method is invoked by the layout manager when the layout family is scalable.
+     * The content of the card (.scalable-element) will be resized to fit the wrapper (kup-card).
+     * The scaling is performed by using a CSS variable (--kup_card_scalable_multiplier) which will impact the card's font-size.
+     * When there is empty space, the multiplier will be increased, as will the content.
+     * Viceversa, when the content exceeds the boundaries, the multiplier will be decreased.
      */
-    await redraw();
-    while ((el.clientWidth < cardWidthLow || el.clientWidth > cardWidthHigh) &&
-      tooManyAttempts > 0 &&
-      multiplier > multiplierStep) {
-      tooManyAttempts--;
-      if (el.clientWidth < cardWidthLow &&
-        el.clientHeight <= cardHeight) {
-        multiplier = roundMultiplier(multiplier + multiplierStep);
-        await redraw();
-      }
-      else if (el.clientWidth > cardWidthHigh) {
-        multiplier = roundMultiplier(multiplier - multiplierStep);
+    async scalable() {
+        this.scalingActive = true;
+        const root = this.rootElement.shadowRoot;
+        const el = root.querySelector('.scalable-element');
+        const card = this.rootElement;
+        /**
+         * cardHeight sets the maximum height of the content, when exceeded the multiplier will be reduced (90%).
+         */
+        const cardHeight = (90 / 100) * card.clientHeight;
+        /**
+         * cardWidthLow and cardWidthHigh will set the boundaries in which the component must fit (85% - 95%).
+         */
+        const cardWidthLow = (85 / 100) * card.clientWidth;
+        const cardWidthHigh = (95 / 100) * card.clientWidth;
+        const multiplierStep = 0.1;
+        let tooManyAttempts = 75;
+        let multiplier = 1;
+        let redrawCount = 0;
+        const redraw = async () => {
+            card.style.setProperty('--kup_card_scalable_multiplier', multiplier.toFixed(1) + '');
+            this.kupManager.debug.logMessage(this, 'Redrawing scalable card (' + ++redrawCount + ').', KupDebugCategory.INFO);
+        };
+        const roundMultiplier = (m) => {
+            return parseFloat(m.toFixed(1));
+        };
+        card.style.opacity = '0';
+        card.style.transition = 'opacity 125ms ease-in';
+        /**
+         * Cycle to adjust the width.
+         */
         await redraw();
-      }
-      else {
-        tooManyAttempts = 0;
-      }
-    }
-    card.style.opacity = '1';
-    this.scalingActive = false;
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.language.register(this);
-    this.kupManager.theme.register(this);
-    this.registerListeners();
-  }
-  componentDidLoad() {
-    const rippleEl = this.rootElement.shadowRoot.querySelector('.mdc-ripple-surface');
-    if (rippleEl) {
-      MDCRipple.attachTo(rippleEl);
-    }
-    this.kupManager.resize.observe(this.rootElement);
-    this.kupReady.emit({
-      comp: this,
-      id: this.rootElement.id,
-    });
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.setEvents();
-    this.layoutManager();
-    if (this.isMenu &&
-      this.menuVisible &&
-      (!document.activeElement ||
-        document.activeElement.tagName === 'BODY')) {
-      setTimeout(() => {
-        this.rootElement.focus();
-      }, 0);
-    }
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    if (!this.data && this.rootElement.children.length < 1) {
-      return;
-    }
-    const style = {
-      '--kup_card_height': this.sizeY ? this.sizeY : '100%',
-      '--kup_card_width': this.sizeX ? this.sizeX : '100%',
-    };
-    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
-  }
-  disconnectedCallback() {
-    this.kupManager.interact.unregister([this.rootElement]);
-    this.kupManager.language.unregister(this);
-    this.kupManager.resize.unobserve(this.rootElement);
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "KupCardData",
-          "resolved": "KupCardData",
-          "references": {
-            "KupCardData": {
-              "location": "import",
-              "path": "./kup-card-declarations",
-              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardData"
+        while ((el.clientWidth < cardWidthLow || el.clientWidth > cardWidthHigh) &&
+            tooManyAttempts > 0 &&
+            multiplier > multiplierStep) {
+            tooManyAttempts--;
+            if (el.clientWidth < cardWidthLow &&
+                el.clientHeight <= cardHeight) {
+                multiplier = roundMultiplier(multiplier + multiplierStep);
+                await redraw();
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "The actual data of the card."
-        },
-        "defaultValue": "null"
-      },
-      "isMenu": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Defines whether the card is a menu or not.\r\nWorks together with menuVisible."
-        },
-        "attribute": "is-menu",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "layoutFamily": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "KupCardFamily",
-          "resolved": "KupCardFamily.BOX | KupCardFamily.BUILT_IN | KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.FREE | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
-          "references": {
-            "KupCardFamily": {
-              "location": "import",
-              "path": "./kup-card-declarations",
-              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardFamily"
+            else if (el.clientWidth > cardWidthHigh) {
+                multiplier = roundMultiplier(multiplier - multiplierStep);
+                await redraw();
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "KupCardFamily.STANDARD"
-            }],
-          "text": "Sets the type of the card."
-        },
-        "attribute": "layout-family",
-        "reflect": false,
-        "defaultValue": "KupCardFamily.STANDARD"
-      },
-      "layoutNumber": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "1"
-            }],
-          "text": "Sets the number of the layout."
-        },
-        "attribute": "layout-number",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "menuVisible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Sets the status of the card as menu, when false it's hidden otherwise it's visible.\r\nWorks together with isMenu."
-        },
-        "attribute": "menu-visible",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "sizeX": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"100%\""
-            }],
-          "text": "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
-        },
-        "attribute": "size-x",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      },
-      "sizeY": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"100%\""
-            }],
-          "text": "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
-        },
-        "attribute": "size-y",
-        "reflect": false,
-        "defaultValue": "'100%'"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupClick",
-        "name": "kup-card-click",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the card is clicked."
-        },
-        "complexType": {
-          "original": "KupCardClickPayload",
-          "resolved": "KupCardClickPayload",
-          "references": {
-            "KupCardClickPayload": {
-              "location": "import",
-              "path": "./kup-card-declarations",
-              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardClickPayload"
+            else {
+                tooManyAttempts = 0;
             }
-          }
         }
-      }, {
-        "method": "kupClose",
-        "name": "kup-card-close",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when a dialog card is closed with the \"X\"."
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
-            }
-          }
+        card.style.opacity = '1';
+        this.scalingActive = false;
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        this.kupManager.debug.logLoad(this, false);
+        this.kupManager.language.register(this);
+        this.kupManager.theme.register(this);
+        this.registerListeners();
+    }
+    componentDidLoad() {
+        const rippleEl = this.rootElement.shadowRoot.querySelector('.mdc-ripple-surface');
+        if (rippleEl) {
+            MDCRipple.attachTo(rippleEl);
         }
-      }, {
-        "method": "kupEvent",
-        "name": "kup-card-event",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when a sub-component of the card emits an event."
-        },
-        "complexType": {
-          "original": "KupCardEventPayload",
-          "resolved": "KupCardEventPayload",
-          "references": {
-            "KupCardEventPayload": {
-              "location": "import",
-              "path": "./kup-card-declarations",
-              "id": "src/components/kup-card/kup-card-declarations.ts::KupCardEventPayload"
-            }
-          }
+        this.kupManager.resize.observe(this.rootElement);
+        this.kupReady.emit({
+            comp: this,
+            id: this.rootElement.id,
+        });
+        this.kupManager.debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        this.kupManager.debug.logRender(this, false);
+    }
+    componentDidRender() {
+        this.setEvents();
+        this.layoutManager();
+        if (this.isMenu &&
+            this.menuVisible &&
+            (!document.activeElement ||
+                document.activeElement.tagName === 'BODY')) {
+            setTimeout(() => {
+                this.rootElement.focus();
+            }, 0);
         }
-      }, {
-        "method": "kupReady",
-        "name": "kup-card-ready",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the component is ready."
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
-            }
-          }
+        this.kupManager.debug.logRender(this, true);
+    }
+    render() {
+        if (!this.data && this.rootElement.children.length < 1) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "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."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        const style = {
+            '--kup_card_height': this.sizeY ? this.sizeY : '100%',
+            '--kup_card_width': this.sizeX ? this.sizeX : '100%',
+        };
+        return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
+    }
+    disconnectedCallback() {
+        this.kupManager.interact.unregister([this.rootElement]);
+        this.kupManager.language.unregister(this);
+        this.kupManager.resize.unobserve(this.rootElement);
+        this.kupManager.theme.unregister(this);
+    }
+    static get is() { return "kup-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }, {
+                            "name": "see",
+                            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+                        }],
+                    "text": "Custom style of the component."
+                },
+                "attribute": "custom-style",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupCardData",
+                    "resolved": "KupCardData",
+                    "references": {
+                        "KupCardData": {
+                            "location": "import",
+                            "path": "./kup-card-declarations",
+                            "id": "src/components/kup-card/kup-card-declarations.ts::KupCardData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The actual data of the card."
+                },
+                "defaultValue": "null"
+            },
+            "isMenu": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Defines whether the card is a menu or not.\r\nWorks together with menuVisible."
+                },
+                "attribute": "is-menu",
+                "reflect": true,
+                "defaultValue": "false"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "layoutFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupCardFamily",
+                    "resolved": "KupCardFamily.BOX | KupCardFamily.BUILT_IN | KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.FREE | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
+                    "references": {
+                        "KupCardFamily": {
+                            "location": "import",
+                            "path": "./kup-card-declarations",
+                            "id": "src/components/kup-card/kup-card-declarations.ts::KupCardFamily"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "KupCardFamily.STANDARD"
+                        }],
+                    "text": "Sets the type of the card."
+                },
+                "attribute": "layout-family",
+                "reflect": false,
+                "defaultValue": "KupCardFamily.STANDARD"
+            },
+            "layoutNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Sets the number of the layout."
+                },
+                "attribute": "layout-number",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "menuVisible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the status of the card as menu, when false it's hidden otherwise it's visible.\r\nWorks together with isMenu."
+                },
+                "attribute": "menu-visible",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "sizeX": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"100%\""
+                        }],
+                    "text": "The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.)."
+                },
+                "attribute": "size-x",
+                "reflect": false,
+                "defaultValue": "'100%'"
+            },
+            "sizeY": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"100%\""
+                        }],
+                    "text": "The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.)."
+                },
+                "attribute": "size-y",
+                "reflect": false,
+                "defaultValue": "'100%'"
             }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupClick",
+                "name": "kup-card-click",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the card is clicked."
+                },
+                "complexType": {
+                    "original": "KupCardClickPayload",
+                    "resolved": "KupCardClickPayload",
+                    "references": {
+                        "KupCardClickPayload": {
+                            "location": "import",
+                            "path": "./kup-card-declarations",
+                            "id": "src/components/kup-card/kup-card-declarations.ts::KupCardClickPayload"
+                        }
+                    }
+                }
             }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "resizeCallback": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is invoked by KupManager whenever the component changes size.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "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."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "kupClose",
+                "name": "kup-card-close",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when a dialog card is closed with the \"X\"."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupEvent",
+                "name": "kup-card-event",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when a sub-component of the card emits an event."
+                },
+                "complexType": {
+                    "original": "KupCardEventPayload",
+                    "resolved": "KupCardEventPayload",
+                    "references": {
+                        "KupCardEventPayload": {
+                            "location": "import",
+                            "path": "./kup-card-declarations",
+                            "id": "src/components/kup-card/kup-card-declarations.ts::KupCardEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "kupReady",
+                "name": "kup-card-ready",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the component is ready."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "tags": [{
+                                    "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."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "resizeCallback": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is invoked by KupManager whenever the component changes size.",
+                    "tags": []
+                }
+            },
+            "setProps": {
+                "complexType": {
+                    "signature": "(props: GenericObject) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "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."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
 }