@sme.up/ketchup 8.0.2 → 8.1.0

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

@@ -1,949 +1,949 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _KupList_instances, _KupList_kupManager, _KupList_radios, _KupList_listItems, _KupList_handleSelection, _KupList_isNested, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { KupListProps, KupListRole, } from './kup-list-declarations';
-import { ItemsDisplayMode } from './kup-list-declarations';
-import { getIdOfItemByDisplayMode } from './kup-list-helper';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
-import { FImage } from '../../f-components/f-image/f-image';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
-import { getProps, setProps } from '../../utils/utils';
-import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
-export class KupList {
-  constructor() {
-    _KupList_instances.add(this);
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    _KupList_kupManager.set(this, kupManagerInstance());
-    _KupList_radios.set(this, []);
-    _KupList_listItems.set(this, []);
-    this.focused = null;
-    this.selected = [];
-    this.customStyle = '';
-    this.data = [];
-    this.displayMode = ItemsDisplayMode.DESCRIPTION;
-    this.filter = '';
-    this.hideText = false;
-    this.isMenu = false;
-    this.keyboardNavigation = true;
-    this.menuVisible = false;
-    this.roleType = KupListRole.LISTBOX;
-    this.selectable = true;
-    this.showIcons = false;
-    this.twoLine = false;
-  }
-  onKupBlur() {
-    this.kupBlur.emit({
-      comp: this,
-      id: this.rootElement.id,
-    });
-  }
-  onKupFocus() {
-    this.kupFocus.emit({
-      comp: this,
-      id: this.rootElement.id,
-    });
-  }
-  onKupClick(index) {
-    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
-  }
-  /*-------------------------------------------------*/
-  /*                L i s t e n e r s                */
-  /*-------------------------------------------------*/
-  listenKeydown(e) {
-    if (this.keyboardNavigation) {
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          e.stopPropagation();
-          this.focusNext();
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          e.stopPropagation();
-          this.focusPrevious();
-          break;
-        case 'Enter':
-          e.preventDefault();
-          e.stopPropagation();
-          __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, this.focused);
-          break;
-      }
-    }
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Focuses the next element of the list.
-   */
-  async focusNext() {
-    if (isNaN(this.focused) ||
-      this.focused === null ||
-      this.focused === undefined) {
-      if (this.selected.length === 1) {
-        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
-        this.focused = this.data.indexOf(selectedItem) + 1;
-      }
-      else {
-        this.focused = 0;
-      }
-    }
-    else {
-      this.focused++;
-    }
-    if (this.focused > __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1) {
-      this.focused = 0;
-    }
-    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
-  }
-  /**
-   * Focuses the previous element of the list.
-   */
-  async focusPrevious() {
-    if (isNaN(this.focused) ||
-      this.focused === null ||
-      this.focused === undefined) {
-      if (this.selected.length === 1) {
-        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
-        this.focused = this.data.indexOf(selectedItem) - 1;
-      }
-      else {
-        this.focused = 0;
-      }
-    }
-    else {
-      this.focused--;
-    }
-    if (this.focused < 0) {
-      this.focused = __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1;
-    }
-    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
-  }
-  /**
-   * 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, KupListProps, descriptions);
-  }
-  /**
-   * Returns the selected node.
-   * @returns {Promise<KupListNode>} Selected node.
-   */
-  async getSelectedNode() {
-    const nodes = [];
-    this.data.forEach((node) => {
-      if (this.selected.includes(node.id)) {
-        nodes.push(node);
-      }
-    });
-    return nodes;
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Calls handleSelection internal method to select the given item.
-   * @param {number} index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element.
-   */
-  async select(index) {
-    if (index === undefined) {
-      index = this.focused;
-    }
-    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupListProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logLoad(this, false);
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.register(this);
-    for (let index = 0; index < this.data.length; index++) {
-      const el = this.data[index];
-      if (el.selected) {
-        this.selected.push(el.id);
-      }
-    }
-  }
-  componentDidLoad() {
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, false);
-  }
-  componentDidRender() {
-    if (this.isMenu &&
-      this.menuVisible &&
-      (!document.activeElement ||
-        document.activeElement.tagName === 'BODY')) {
-      setTimeout(() => {
-        this.rootElement.focus();
-      }, 0);
-    }
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, true);
-  }
-  render() {
-    __classPrivateFieldSet(this, _KupList_listItems, [], "f");
-    let componentClass = 'list';
-    let wrapperClass = undefined;
-    if (this.isMenu) {
-      wrapperClass = 'kup-menu';
-      if (this.menuVisible) {
-        wrapperClass += ' visible';
-      }
-    }
-    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
-    if (this.selectable != true) {
-      componentClass += ' list--non-interactive';
-    }
-    if (this.twoLine) {
-      componentClass += ' list--two-line';
-    }
-    if (this.hideText) {
-      componentClass += ' text-hidden';
-    }
-    if (!this.data || this.data.length === 0) {
-      componentClass += ' list--empty';
-    }
-    let roleAttr = this.roleType;
-    let ariaMultiSelectable = 'false';
-    if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isMultiSelection).call(this)) {
-      ariaMultiSelectable = 'true';
-    }
-    __classPrivateFieldSet(this, _KupList_radios, [], "f");
-    let index = 0;
-    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: "kup-component", class: wrapperClass }, h("ul", { class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
-      .filter((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
-      .map((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
-  }
-  disconnectedCallback() {
-    __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.unregister(this);
-  }
-  static get is() { return "kup-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-list.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": true,
-        "complexType": {
-          "original": "KupListNode[]",
-          "resolved": "KupListNode[]",
-          "references": {
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "[]"
-            }],
-          "text": "The data of the list."
-        },
-        "defaultValue": "[]"
-      },
-      "displayMode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ItemsDisplayMode",
-          "resolved": "ItemsDisplayMode.CODE | ItemsDisplayMode.DESCRIPTION | ItemsDisplayMode.DESCRIPTION_AND_CODE",
-          "references": {
-            "ItemsDisplayMode": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "ItemsDisplayMode.DESCRIPTION"
-            }],
-          "text": "Selects how the items must display their label and how they can be filtered for."
-        },
-        "attribute": "display-mode",
-        "reflect": false,
-        "defaultValue": "ItemsDisplayMode.DESCRIPTION"
-      },
-      "filter": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "''"
-            }],
-          "text": "Keeps string for filtering elements when filter mode is active"
-        },
-        "attribute": "filter",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "hideText": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Hides rows' text, ideally to display a list of icons only."
-        },
-        "attribute": "hide-text",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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 list is a menu or not."
-        },
-        "attribute": "is-menu",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "keyboardNavigation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "true"
-            }],
-          "text": "When true, enables items' navigation through arrow keys."
-        },
-        "attribute": "keyboard-navigation",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "menuVisible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Sets the status of the menu, when false it's hidden otherwise it's visible."
-        },
-        "attribute": "menu-visible",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "roleType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "KupListRole",
-          "resolved": "KupListRole.GROUP | KupListRole.LISTBOX | KupListRole.RADIOGROUP",
-          "references": {
-            "KupListRole": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "KupListRole.LISTBOX"
-            }],
-          "text": "Defines the type of selection. Values accepted: listbox, radiogroup or group."
-        },
-        "attribute": "role-type",
-        "reflect": false,
-        "defaultValue": "KupListRole.LISTBOX"
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "true"
-            }],
-          "text": "Defines whether items are selectable or not."
-        },
-        "attribute": "selectable",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showIcons": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Displays the icons associated to each row when set to true."
-        },
-        "attribute": "show-icons",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "twoLine": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "The list elements descriptions will be arranged in two lines."
-        },
-        "attribute": "two-line",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focused": {},
-      "selected": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "kupBlur",
-        "name": "kup-list-blur",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          }
-        }
-      }, {
-        "method": "kupFocus",
-        "name": "kup-list-focus",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupEventPayload",
-          "resolved": "KupEventPayload",
-          "references": {
-            "KupEventPayload": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          }
-        }
-      }, {
-        "method": "kupClick",
-        "name": "kup-list-click",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "KupListEventPayload",
-          "resolved": "KupListEventPayload",
-          "references": {
-            "KupListEventPayload": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "focusNext": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focuses the next element of the list.",
-          "tags": []
-        }
-      },
-      "focusPrevious": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focuses the previous element of the list.",
-          "tags": []
-        }
-      },
-      "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."
-            }]
-        }
-      },
-      "getSelectedNode": {
-        "complexType": {
-          "signature": "() => Promise<KupListNode[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations"
-            }
-          },
-          "return": "Promise<KupListNode[]>"
-        },
-        "docs": {
-          "text": "Returns the selected node.",
-          "tags": [{
-              "name": "returns",
-              "text": "Selected node."
-            }]
-        }
-      },
-      "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": []
-        }
-      },
-      "select": {
-        "complexType": {
-          "signature": "(index?: number) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
-                }],
-              "text": "- Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Calls handleSelection internal method to select the given item.",
-          "tags": [{
-              "name": "param",
-              "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
-            }]
-        }
-      },
-      "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"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "listenKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_handleSelection = function _KupList_handleSelection(index) {
-  if (index !== null && index !== undefined && !isNaN(index)) {
-    const listItems = this.rootElement.shadowRoot.querySelectorAll('.list-item');
-    const id = listItems[index].dataset.id;
-    const dataEl = this.data.find((x) => x.id === id);
-    switch (this.roleType) {
-      case KupListRole.GROUP:
-        if (this.selected.includes(id)) {
-          this.selected.splice(this.selected.indexOf(id), 1);
-        }
-        else {
-          this.selected.push(id);
-        }
-        this.selected = new Array(...this.selected);
-        break;
-      default:
-        this.selected = new Array(id);
-        break;
-    }
-    for (let index = 0; index < this.data.length; index++) {
-      const item = this.data[index];
-      item.selected = this.selected.includes(item.id);
-    }
-    this.kupClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      selected: dataEl,
-    });
-  }
-}, _KupList_isNested = function _KupList_isNested() {
-  return this.rootElement.hasAttribute('nested-list');
-}, _KupList_renderListItem = function _KupList_renderListItem(item, index) {
-  if (item.selected != true) {
-    item.selected = false;
-  }
-  if (!item.id) {
-    item.id = item.value;
-  }
-  let nestedList = null;
-  if (item.children && item.children.length > 0) {
-    this.rootElement.setAttribute('nested-list', '');
-    nestedList = (h("kup-list", { class: "kup-paddingless", data: item.children, isMenu: true, menuVisible: true, "nested-list": true }));
-  }
-  let imageTag = undefined;
-  if (this.showIcons == true &&
-    item.icon != null &&
-    item.icon.trim() != '') {
-    imageTag = __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon);
-  }
-  let primaryTextTag = [
-    getIdOfItemByDisplayMode(item, this.displayMode, ' - '),
-  ];
-  let secTextTag = [];
-  if (this.twoLine && item.secondaryText && item.secondaryText != '') {
-    primaryTextTag = [
-      h("span", { class: "list-item__primary-text" }, item.value),
-    ];
-    secTextTag = [
-      h("span", { class: "list-item__secondary-text" }, item.secondaryText),
-    ];
-  }
-  let classAttr = 'list-item';
-  let tabIndexAttr = item.selected == true ? '0' : '-1';
-  if (!__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this) &&
-    item.selected == true &&
-    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
-    classAttr += ' list-item--selected';
-  }
-  if (this.focused === index) {
-    classAttr += ' list-item--focused';
-  }
-  let roleAttr = 'option';
-  let ariaCheckedAttr = null;
-  let ariaSelectedAttr = item.selected == true ? 'true' : 'false';
-  if (this.selectable != true) {
-    ariaSelectedAttr = null;
-  }
-  let innerSpanTag = [
-    imageTag,
-    h("span", { class: "list-item__text" }, primaryTextTag, secTextTag),
-  ];
-  if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
-    roleAttr = 'radio';
-    ariaCheckedAttr = item.selected == true ? 'true' : 'false';
-    let dataTmp = [
-      {
-        value: item.id,
-        label: '',
-        checked: item.selected == true ? true : false,
-      },
-    ];
-    let trickForMDC = {
-      display: 'none',
-    };
-    innerSpanTag = [
-      h("span", { class: "list-item__graphic" }, h("input", { type: "radio", style: trickForMDC }), h("kup-radio", { data: dataTmp, id: this.rootElement.id + '_' + index, ref: (el) => (__classPrivateFieldGet(this, _KupList_radios, "f")[index] = el) })),
-      imageTag,
-      h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index }, primaryTextTag, secTextTag),
-    ];
-  }
-  else if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this)) {
-    roleAttr = 'checkbox';
-    ariaCheckedAttr = item.selected == true ? 'true' : 'false';
-    let checkedAttr = item.selected == true ? true : false;
-    let trickForMDC = {
-      display: 'none',
-    };
-    innerSpanTag = [
-      h("span", { class: "list-item__graphic" }, h("input", { type: "checkbox", style: trickForMDC }), h(FCheckbox, { checked: checkedAttr })),
-      imageTag,
-      h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index }, primaryTextTag, secTextTag),
-    ];
-  }
-  const vNodes = [];
-  if (item.separator) {
-    vNodes.push(h("li", { role: "separator", class: "list-divider" }));
-  }
-  vNodes.push(h("li", { ref: (el) => {
-      __classPrivateFieldGet(this, _KupList_listItems, "f").push(el);
-    }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-id": item.id, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
-      ? (e) => e.stopPropagation()
-      : () => this.onKupBlur(), onFocus: !this.selectable
-      ? (e) => e.stopPropagation()
-      : () => this.onKupFocus(), onClick: !this.selectable
-      ? (e) => e.stopPropagation()
-      : __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this)
-        ? (e) => {
-          e.stopPropagation();
-          this.onKupClick(index);
-        }
-        : () => this.onKupClick(index) }, innerSpanTag, nestedList
-    ? [
-      h(FImage, { resource: "chevron-right", sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "list-item__expand-icon" }),
-      nestedList,
-    ]
-    : null));
-  return vNodes;
-}, _KupList_getIconTag = function _KupList_getIconTag(icon) {
-  const large = this.rootElement.classList.contains('kup-large');
-  const propsFImage = {
-    color: `var(${KupThemeColorValues.PRIMARY})`,
-    sizeX: large ? '32px' : '24px',
-    sizeY: large ? '32px' : '24px',
-  };
-  return (h(FImage, Object.assign({}, propsFImage, { resource: icon, wrapperClass: `icon-button__icon kup-icon` })));
-}, _KupList_isMultiSelection = function _KupList_isMultiSelection() {
-  return __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this);
-}, _KupList_isCheckBoxRule = function _KupList_isCheckBoxRule() {
-  return this.roleType == KupListRole.GROUP;
-}, _KupList_isRadioButtonRule = function _KupList_isRadioButtonRule() {
-  return this.roleType == KupListRole.RADIOGROUP;
-}, _KupList_isListBoxRule = function _KupList_isListBoxRule() {
-  return this.roleType == KupListRole.LISTBOX;
-}, _KupList_checkRoleType = function _KupList_checkRoleType() {
-  if (!__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this) && !__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
-    this.roleType = KupListRole.LISTBOX;
-  }
-}, _KupList_itemCompliant = function _KupList_itemCompliant(item) {
-  if (!this.filter) {
-    return true;
-  }
-  return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
-    item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
-};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _KupList_instances, _KupList_kupManager, _KupList_radios, _KupList_listItems, _KupList_handleSelection, _KupList_isNested, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { KupListProps, KupListRole, } from './kup-list-declarations';
+import { ItemsDisplayMode } from './kup-list-declarations';
+import { getIdOfItemByDisplayMode } from './kup-list-helper';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { FImage } from '../../f-components/f-image/f-image';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { getProps, setProps } from '../../utils/utils';
+import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
+export class KupList {
+  constructor() {
+    _KupList_instances.add(this);
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    _KupList_kupManager.set(this, kupManagerInstance());
+    _KupList_radios.set(this, []);
+    _KupList_listItems.set(this, []);
+    this.focused = null;
+    this.selected = [];
+    this.customStyle = '';
+    this.data = [];
+    this.displayMode = ItemsDisplayMode.DESCRIPTION;
+    this.filter = '';
+    this.hideText = false;
+    this.isMenu = false;
+    this.keyboardNavigation = true;
+    this.menuVisible = false;
+    this.roleType = KupListRole.LISTBOX;
+    this.selectable = true;
+    this.showIcons = false;
+    this.twoLine = false;
+  }
+  onKupBlur() {
+    this.kupBlur.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+  }
+  onKupFocus() {
+    this.kupFocus.emit({
+      comp: this,
+      id: this.rootElement.id,
+    });
+  }
+  onKupClick(index) {
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
+  }
+  /*-------------------------------------------------*/
+  /*                L i s t e n e r s                */
+  /*-------------------------------------------------*/
+  listenKeydown(e) {
+    if (this.keyboardNavigation) {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          this.focusNext();
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          this.focusPrevious();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          e.stopPropagation();
+          __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, this.focused);
+          break;
+      }
+    }
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Focuses the next element of the list.
+   */
+  async focusNext() {
+    if (isNaN(this.focused) ||
+      this.focused === null ||
+      this.focused === undefined) {
+      if (this.selected.length === 1) {
+        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
+        this.focused = this.data.indexOf(selectedItem) + 1;
+      }
+      else {
+        this.focused = 0;
+      }
+    }
+    else {
+      this.focused++;
+    }
+    if (this.focused > __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1) {
+      this.focused = 0;
+    }
+    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
+  }
+  /**
+   * Focuses the previous element of the list.
+   */
+  async focusPrevious() {
+    if (isNaN(this.focused) ||
+      this.focused === null ||
+      this.focused === undefined) {
+      if (this.selected.length === 1) {
+        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
+        this.focused = this.data.indexOf(selectedItem) - 1;
+      }
+      else {
+        this.focused = 0;
+      }
+    }
+    else {
+      this.focused--;
+    }
+    if (this.focused < 0) {
+      this.focused = __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1;
+    }
+    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
+  }
+  /**
+   * 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, KupListProps, descriptions);
+  }
+  /**
+   * Returns the selected node.
+   * @returns {Promise<KupListNode>} Selected node.
+   */
+  async getSelectedNode() {
+    const nodes = [];
+    this.data.forEach((node) => {
+      if (this.selected.includes(node.id)) {
+        nodes.push(node);
+      }
+    });
+    return nodes;
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Calls handleSelection internal method to select the given item.
+   * @param {number} index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element.
+   */
+  async select(index) {
+    if (index === undefined) {
+      index = this.focused;
+    }
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupListProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.register(this);
+    for (let index = 0; index < this.data.length; index++) {
+      const el = this.data[index];
+      if (el.selected) {
+        this.selected.push(el.id);
+      }
+    }
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, false);
+  }
+  componentDidRender() {
+    if (this.isMenu &&
+      this.menuVisible &&
+      (!document.activeElement ||
+        document.activeElement.tagName === 'BODY')) {
+      setTimeout(() => {
+        this.rootElement.focus();
+      }, 0);
+    }
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    __classPrivateFieldSet(this, _KupList_listItems, [], "f");
+    let componentClass = 'list';
+    let wrapperClass = undefined;
+    if (this.isMenu) {
+      wrapperClass = 'kup-menu';
+      if (this.menuVisible) {
+        wrapperClass += ' visible';
+      }
+    }
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
+    if (this.selectable != true) {
+      componentClass += ' list--non-interactive';
+    }
+    if (this.twoLine) {
+      componentClass += ' list--two-line';
+    }
+    if (this.hideText) {
+      componentClass += ' text-hidden';
+    }
+    if (!this.data || this.data.length === 0) {
+      componentClass += ' list--empty';
+    }
+    let roleAttr = this.roleType;
+    let ariaMultiSelectable = 'false';
+    if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isMultiSelection).call(this)) {
+      ariaMultiSelectable = 'true';
+    }
+    __classPrivateFieldSet(this, _KupList_radios, [], "f");
+    let index = 0;
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: "kup-component", class: wrapperClass }, h("ul", { class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
+      .filter((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
+      .map((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.unregister(this);
+  }
+  static get is() { return "kup-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-list.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": true,
+        "complexType": {
+          "original": "KupListNode[]",
+          "resolved": "KupListNode[]",
+          "references": {
+            "KupListNode": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "[]"
+            }],
+          "text": "The data of the list."
+        },
+        "defaultValue": "[]"
+      },
+      "displayMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ItemsDisplayMode",
+          "resolved": "ItemsDisplayMode.CODE | ItemsDisplayMode.DESCRIPTION | ItemsDisplayMode.DESCRIPTION_AND_CODE",
+          "references": {
+            "ItemsDisplayMode": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "ItemsDisplayMode.DESCRIPTION"
+            }],
+          "text": "Selects how the items must display their label and how they can be filtered for."
+        },
+        "attribute": "display-mode",
+        "reflect": false,
+        "defaultValue": "ItemsDisplayMode.DESCRIPTION"
+      },
+      "filter": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "''"
+            }],
+          "text": "Keeps string for filtering elements when filter mode is active"
+        },
+        "attribute": "filter",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "hideText": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Hides rows' text, ideally to display a list of icons only."
+        },
+        "attribute": "hide-text",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "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 list is a menu or not."
+        },
+        "attribute": "is-menu",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "keyboardNavigation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "When true, enables items' navigation through arrow keys."
+        },
+        "attribute": "keyboard-navigation",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "menuVisible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Sets the status of the menu, when false it's hidden otherwise it's visible."
+        },
+        "attribute": "menu-visible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "roleType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "KupListRole",
+          "resolved": "KupListRole.GROUP | KupListRole.LISTBOX | KupListRole.RADIOGROUP",
+          "references": {
+            "KupListRole": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "KupListRole.LISTBOX"
+            }],
+          "text": "Defines the type of selection. Values accepted: listbox, radiogroup or group."
+        },
+        "attribute": "role-type",
+        "reflect": false,
+        "defaultValue": "KupListRole.LISTBOX"
+      },
+      "selectable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "Defines whether items are selectable or not."
+        },
+        "attribute": "selectable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showIcons": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Displays the icons associated to each row when set to true."
+        },
+        "attribute": "show-icons",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "twoLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "The list elements descriptions will be arranged in two lines."
+        },
+        "attribute": "two-line",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focused": {},
+      "selected": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupBlur",
+        "name": "kup-list-blur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
+      }, {
+        "method": "kupFocus",
+        "name": "kup-list-focus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          }
+        }
+      }, {
+        "method": "kupClick",
+        "name": "kup-list-click",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupListEventPayload",
+          "resolved": "KupListEventPayload",
+          "references": {
+            "KupListEventPayload": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "focusNext": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupListNode": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focuses the next element of the list.",
+          "tags": []
+        }
+      },
+      "focusPrevious": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupListNode": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focuses the previous element of the list.",
+          "tags": []
+        }
+      },
+      "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."
+            }]
+        }
+      },
+      "getSelectedNode": {
+        "complexType": {
+          "signature": "() => Promise<KupListNode[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupListNode": {
+              "location": "import",
+              "path": "./kup-list-declarations"
+            }
+          },
+          "return": "Promise<KupListNode[]>"
+        },
+        "docs": {
+          "text": "Returns the selected node.",
+          "tags": [{
+              "name": "returns",
+              "text": "Selected node."
+            }]
+        }
+      },
+      "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": []
+        }
+      },
+      "select": {
+        "complexType": {
+          "signature": "(index?: number) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
+                }],
+              "text": "- Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Calls handleSelection internal method to select the given item.",
+          "tags": [{
+              "name": "param",
+              "text": "index - Based zero index of the item that must be selected, when not provided the list will attempt to select the focused element."
+            }]
+        }
+      },
+      "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"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "listenKeydown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_handleSelection = function _KupList_handleSelection(index) {
+  if (index !== null && index !== undefined && !isNaN(index)) {
+    const listItems = this.rootElement.shadowRoot.querySelectorAll('.list-item');
+    const id = listItems[index].dataset.id;
+    const dataEl = this.data.find((x) => x.id === id);
+    switch (this.roleType) {
+      case KupListRole.GROUP:
+        if (this.selected.includes(id)) {
+          this.selected.splice(this.selected.indexOf(id), 1);
+        }
+        else {
+          this.selected.push(id);
+        }
+        this.selected = new Array(...this.selected);
+        break;
+      default:
+        this.selected = new Array(id);
+        break;
+    }
+    for (let index = 0; index < this.data.length; index++) {
+      const item = this.data[index];
+      item.selected = this.selected.includes(item.id);
+    }
+    this.kupClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      selected: dataEl,
+    });
+  }
+}, _KupList_isNested = function _KupList_isNested() {
+  return this.rootElement.hasAttribute('nested-list');
+}, _KupList_renderListItem = function _KupList_renderListItem(item, index) {
+  if (item.selected != true) {
+    item.selected = false;
+  }
+  if (!item.id) {
+    item.id = item.value;
+  }
+  let nestedList = null;
+  if (item.children && item.children.length > 0) {
+    this.rootElement.setAttribute('nested-list', '');
+    nestedList = (h("kup-list", { class: "kup-paddingless", data: item.children, isMenu: true, menuVisible: true, "nested-list": true }));
+  }
+  let imageTag = undefined;
+  if (this.showIcons == true &&
+    item.icon != null &&
+    item.icon.trim() != '') {
+    imageTag = __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon);
+  }
+  let primaryTextTag = [
+    getIdOfItemByDisplayMode(item, this.displayMode, ' - '),
+  ];
+  let secTextTag = [];
+  if (this.twoLine && item.secondaryText && item.secondaryText != '') {
+    primaryTextTag = [
+      h("span", { class: "list-item__primary-text" }, item.value),
+    ];
+    secTextTag = [
+      h("span", { class: "list-item__secondary-text" }, item.secondaryText),
+    ];
+  }
+  let classAttr = 'list-item';
+  let tabIndexAttr = item.selected == true ? '0' : '-1';
+  if (!__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this) &&
+    item.selected == true &&
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
+    classAttr += ' list-item--selected';
+  }
+  if (this.focused === index) {
+    classAttr += ' list-item--focused';
+  }
+  let roleAttr = 'option';
+  let ariaCheckedAttr = null;
+  let ariaSelectedAttr = item.selected == true ? 'true' : 'false';
+  if (this.selectable != true) {
+    ariaSelectedAttr = null;
+  }
+  let innerSpanTag = [
+    imageTag,
+    h("span", { class: "list-item__text" }, primaryTextTag, secTextTag),
+  ];
+  if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
+    roleAttr = 'radio';
+    ariaCheckedAttr = item.selected == true ? 'true' : 'false';
+    let dataTmp = [
+      {
+        value: item.id,
+        label: '',
+        checked: item.selected == true ? true : false,
+      },
+    ];
+    let trickForMDC = {
+      display: 'none',
+    };
+    innerSpanTag = [
+      h("span", { class: "list-item__graphic" }, h("input", { type: "radio", style: trickForMDC }), h("kup-radio", { data: dataTmp, id: this.rootElement.id + '_' + index, ref: (el) => (__classPrivateFieldGet(this, _KupList_radios, "f")[index] = el) })),
+      imageTag,
+      h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index }, primaryTextTag, secTextTag),
+    ];
+  }
+  else if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this)) {
+    roleAttr = 'checkbox';
+    ariaCheckedAttr = item.selected == true ? 'true' : 'false';
+    let checkedAttr = item.selected == true ? true : false;
+    let trickForMDC = {
+      display: 'none',
+    };
+    innerSpanTag = [
+      h("span", { class: "list-item__graphic" }, h("input", { type: "checkbox", style: trickForMDC }), h(FCheckbox, { checked: checkedAttr })),
+      imageTag,
+      h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index }, primaryTextTag, secTextTag),
+    ];
+  }
+  const vNodes = [];
+  if (item.separator) {
+    vNodes.push(h("li", { role: "separator", class: "list-divider" }));
+  }
+  vNodes.push(h("li", { ref: (el) => {
+      __classPrivateFieldGet(this, _KupList_listItems, "f").push(el);
+    }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-id": item.id, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
+      ? (e) => e.stopPropagation()
+      : () => this.onKupBlur(), onFocus: !this.selectable
+      ? (e) => e.stopPropagation()
+      : () => this.onKupFocus(), onClick: !this.selectable
+      ? (e) => e.stopPropagation()
+      : __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this)
+        ? (e) => {
+          e.stopPropagation();
+          this.onKupClick(index);
+        }
+        : () => this.onKupClick(index) }, innerSpanTag, nestedList
+    ? [
+      h(FImage, { resource: "chevron-right", sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "list-item__expand-icon" }),
+      nestedList,
+    ]
+    : null));
+  return vNodes;
+}, _KupList_getIconTag = function _KupList_getIconTag(icon) {
+  const large = this.rootElement.classList.contains('kup-large');
+  const propsFImage = {
+    color: `var(${KupThemeColorValues.PRIMARY})`,
+    sizeX: large ? '32px' : '24px',
+    sizeY: large ? '32px' : '24px',
+  };
+  return (h(FImage, Object.assign({}, propsFImage, { resource: icon, wrapperClass: `icon-button__icon kup-icon` })));
+}, _KupList_isMultiSelection = function _KupList_isMultiSelection() {
+  return __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this);
+}, _KupList_isCheckBoxRule = function _KupList_isCheckBoxRule() {
+  return this.roleType == KupListRole.GROUP;
+}, _KupList_isRadioButtonRule = function _KupList_isRadioButtonRule() {
+  return this.roleType == KupListRole.RADIOGROUP;
+}, _KupList_isListBoxRule = function _KupList_isListBoxRule() {
+  return this.roleType == KupListRole.LISTBOX;
+}, _KupList_checkRoleType = function _KupList_checkRoleType() {
+  if (!__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this) && !__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
+    this.roleType = KupListRole.LISTBOX;
+  }
+}, _KupList_itemCompliant = function _KupList_itemCompliant(item) {
+  if (!this.filter) {
+    return true;
+  }
+  return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
+    item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+};