@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,809 +1,809 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { MDCRipple } from '@material/ripple';
-import * as boxLayouts from './box/kup-card-box';
-import * as builtInLayouts from './built-in/kup-card-built-in';
-import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
-import * as dialogLayouts from './dialog/kup-card-dialog';
-import * as freeLayouts from './free/kup-card-free';
-import * as scalableLayouts from './scalable/kup-card-scalable';
-import * as standardLayouts from './standard/kup-card-standard';
-import Picker from 'vanilla-picker';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { KupCardFamily, KupCardCSSClasses, KupCardIds, KupCardProps, } from './kup-card-declarations';
-import { FImage } from '../../f-components/f-image/f-image';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { layoutSpecificEvents } from './kup-card-helper';
-import { getProps, setProps } from '../../utils/utils';
-import { componentWrapperId } from '../../variables/GenericVariables';
-export class KupCard {
-  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,
-    });
-  }
-  /*-------------------------------------------------*/
-  /*           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);
-        };
-      }
-    }
-  }
-  /**
-   * 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);
-        }
-      }
-    }
-  }
-  /**
-   * 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);
-        }
-      }
-    }
-    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);
-            }
-          }
-          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;
-      }
-    }
-  }
-  /**
-   * 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 (.scalable-card).
-   * The scaling is performed by using a CSS variable (--kup_card_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.
-   */
-  scalable() {
-    this.scalingActive = true;
-    const root = this.rootElement.shadowRoot;
-    const el = root.querySelector('.scalable-element');
-    const card = root.querySelector('.scalable-card');
-    const multiplierStep = 0.1;
-    /**
-     * 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;
-    let tooManyAttempts = 2000;
-    let multiplier = parseFloat(card.style.getPropertyValue('--kup_card_multiplier'));
-    if (multiplier < 0.1) {
-      multiplier = 1;
-    }
-    /**
-     * Cycle to adjust the width.
-     */
-    while ((el.clientWidth < cardWidthLow || el.clientWidth > cardWidthHigh) &&
-      tooManyAttempts > 0 &&
-      multiplier > multiplierStep) {
-      tooManyAttempts--;
-      if (el.clientWidth < cardWidthLow) {
-        multiplier = multiplier + multiplierStep;
-        card.style.setProperty('--kup_card_multiplier', multiplier + '');
-      }
-      else if (el.clientWidth > cardWidthHigh) {
-        multiplier = multiplier - multiplierStep;
-        card.style.setProperty('--kup_card_multiplier', multiplier + '');
-      }
-      else {
-        tooManyAttempts = 0;
-      }
-    }
-    /**
-     * Cycle to adjust the height, in case it exceeds its boundaries after having adjusted width.
-     */
-    while (el.clientHeight > cardHeight && multiplier > multiplierStep) {
-      multiplier = multiplier - multiplierStep;
-      card.style.setProperty('--kup_card_multiplier', multiplier + '');
-    }
-    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"
-            }
-          }
-        },
-        "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"
-            }
-          }
-        },
-        "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"
-            }
-          }
-        }
-      }, {
-        "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"
-            }
-          }
-        }
-      }, {
-        "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"
-            }
-          }
-        }
-      }, {
-        "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"
-            }
-          }
-        }
-      }];
-  }
-  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"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "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"
-            }
-          },
-          "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"
-            }
-          },
-          "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"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "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"; }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { MDCRipple } from '@material/ripple';
+import * as boxLayouts from './box/kup-card-box';
+import * as builtInLayouts from './built-in/kup-card-built-in';
+import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
+import * as dialogLayouts from './dialog/kup-card-dialog';
+import * as freeLayouts from './free/kup-card-free';
+import * as scalableLayouts from './scalable/kup-card-scalable';
+import * as standardLayouts from './standard/kup-card-standard';
+import Picker from 'vanilla-picker';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { KupCardFamily, KupCardCSSClasses, KupCardIds, KupCardProps, } from './kup-card-declarations';
+import { FImage } from '../../f-components/f-image/f-image';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { layoutSpecificEvents } from './kup-card-helper';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+export class KupCard {
+  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,
+    });
+  }
+  /*-------------------------------------------------*/
+  /*           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);
+        };
+      }
+    }
+  }
+  /**
+   * 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);
+        }
+      }
+    }
+  }
+  /**
+   * 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);
+        }
+      }
+    }
+    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);
+            }
+          }
+          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;
+      }
+    }
+  }
+  /**
+   * 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 (.scalable-card).
+   * The scaling is performed by using a CSS variable (--kup_card_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.
+   */
+  scalable() {
+    this.scalingActive = true;
+    const root = this.rootElement.shadowRoot;
+    const el = root.querySelector('.scalable-element');
+    const card = root.querySelector('.scalable-card');
+    const multiplierStep = 0.1;
+    /**
+     * 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;
+    let tooManyAttempts = 2000;
+    let multiplier = parseFloat(card.style.getPropertyValue('--kup_card_multiplier'));
+    if (multiplier < 0.1) {
+      multiplier = 1;
+    }
+    /**
+     * Cycle to adjust the width.
+     */
+    while ((el.clientWidth < cardWidthLow || el.clientWidth > cardWidthHigh) &&
+      tooManyAttempts > 0 &&
+      multiplier > multiplierStep) {
+      tooManyAttempts--;
+      if (el.clientWidth < cardWidthLow) {
+        multiplier = multiplier + multiplierStep;
+        card.style.setProperty('--kup_card_multiplier', multiplier + '');
+      }
+      else if (el.clientWidth > cardWidthHigh) {
+        multiplier = multiplier - multiplierStep;
+        card.style.setProperty('--kup_card_multiplier', multiplier + '');
+      }
+      else {
+        tooManyAttempts = 0;
+      }
+    }
+    /**
+     * Cycle to adjust the height, in case it exceeds its boundaries after having adjusted width.
+     */
+    while (el.clientHeight > cardHeight && multiplier > multiplierStep) {
+      multiplier = multiplier - multiplierStep;
+      card.style.setProperty('--kup_card_multiplier', multiplier + '');
+    }
+    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"
+            }
+          }
+        },
+        "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"
+            }
+          }
+        },
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }, {
+        "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"
+            }
+          }
+        }
+      }];
+  }
+  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"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "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"
+            }
+          },
+          "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"
+            }
+          },
+          "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"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "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"; }
+}