@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -1,18 +1,18 @@
 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);
+    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;
+    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";
@@ -25,943 +25,943 @@ import { KupThemeColorValues } from "../../managers/kup-theme/kup-theme-declarat
 import { getProps, setProps } from "../../utils/utils";
 import { FCheckbox } from "../../f-components/f-checkbox/f-checkbox";
 export class KupList {
-  constructor() {
-    _KupList_instances.add(this);
+    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;
+            }
+        }
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
     /**
-     * Instance of the KupManager class.
+     * Focuses the next element of the list.
      */
-    _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",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+    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;
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-list/kup-list-declarations.ts::ItemsDisplayMode"
+            else {
+                this.focused = 0;
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListRole"
+        }
+        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;
             }
-          }
-        },
-        "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",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+            else {
+                this.focused = 0;
             }
-          }
         }
-      }, {
-        "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",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
-            }
-          }
+        else {
+            this.focused--;
         }
-      }, {
-        "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",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListEventPayload"
-            }
-          }
+        if (this.focused < 0) {
+            this.focused = __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "focusNext": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+        __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": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focuses the next element of the list.",
-          "tags": []
+        });
+        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;
         }
-      },
-      "focusPrevious": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+        __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);
             }
-          },
-          "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",
-              "id": "global::Promise"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
+    }
+    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);
         }
-      },
-      "getSelectedNode": {
-        "complexType": {
-          "signature": "() => Promise<KupListNode[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "KupListNode": {
-              "location": "import",
-              "path": "./kup-list-declarations",
-              "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+        __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';
             }
-          },
-          "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",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
+        __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
+        if (this.selectable != true) {
+            componentClass += ' list--non-interactive';
         }
-      },
-      "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",
-              "id": "global::Promise"
-            }
-          },
-          "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."
-            }]
+        if (this.twoLine) {
+            componentClass += ' list--two-line';
+        }
+        if (this.hideText) {
+            componentClass += ' text-hidden';
         }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        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",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::ItemsDisplayMode"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListRole"
+                        }
+                    }
+                },
+                "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"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "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"
             }
-          },
-          "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
-      }];
-  }
+        };
+    }
+    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",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupListNode": {
+                            "location": "import",
+                            "path": "./kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the next element of the list.",
+                    "tags": []
+                }
+            },
+            "focusPrevious": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupListNode": {
+                            "location": "import",
+                            "path": "./kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<GenericObject>"
+                },
+                "docs": {
+                    "text": "Used to retrieve component's props values.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                        }, {
+                            "name": "returns",
+                            "text": "List of props as object, each key will be a prop."
+                        }]
+                }
+            },
+            "getSelectedNode": {
+                "complexType": {
+                    "signature": "() => Promise<KupListNode[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupListNode": {
+                            "location": "import",
+                            "path": "./kup-list-declarations",
+                            "id": "src/components/kup-list/kup-list-declarations.ts::KupListNode"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the props to the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "props - Object containing props that will be set to the component."
+                        }]
+                }
+            }
+        };
+    }
+    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);
+    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;
         }
-        else {
-          this.selected.push(id);
+        for (let index = 0; index < this.data.length; index++) {
+            const item = this.data[index];
+            item.selected = this.selected.includes(item.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,
-    });
-  }
+        this.kupClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            selected: dataEl,
+        });
+    }
 }, _KupList_isNested = function _KupList_isNested() {
-  return this.rootElement.hasAttribute('nested-list');
+    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),
+    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, ' - '),
     ];
-  }
-  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),
+    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),
     ];
-  }
-  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;
+    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` })));
+    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);
+    return __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isCheckBoxRule).call(this);
 }, _KupList_isCheckBoxRule = function _KupList_isCheckBoxRule() {
-  return this.roleType == KupListRole.GROUP;
+    return this.roleType == KupListRole.GROUP;
 }, _KupList_isRadioButtonRule = function _KupList_isRadioButtonRule() {
-  return this.roleType == KupListRole.RADIOGROUP;
+    return this.roleType == KupListRole.RADIOGROUP;
 }, _KupList_isListBoxRule = function _KupList_isListBoxRule() {
-  return this.roleType == KupListRole.LISTBOX;
+    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;
-  }
+    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);
+    if (!this.filter) {
+        return true;
+    }
+    return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
+        item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
 };