@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,14 +1,27 @@
-import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
+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_setUnselected, _KupList_sendInfoToSubComponent, _KupList_handleSelection, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
+import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
 import { KupListProps, KupListRole, } from './kup-list-declarations';
 import { ItemsDisplayMode } from './kup-list-declarations';
 import { getValueOfItemByDisplayMode } from './kup-list-helper';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FImage } from '../../f-components/f-image/f-image';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+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);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
@@ -89,28 +102,27 @@ export class KupList {
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
-    this.filteredItems = [];
     /**
      * Instance of the KupManager class.
      */
-    this.kupManager = kupManagerInstance();
-    this.radios = [];
-    this.listItems = [];
+    _KupList_kupManager.set(this, kupManagerInstance());
+    _KupList_radios.set(this, []);
+    _KupList_listItems.set(this, []);
   }
-  onKupBlur(_index) {
+  onKupBlur() {
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
     });
   }
-  onKupFocus(_index) {
+  onKupFocus() {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
     });
   }
   onKupClick(index) {
-    this.handleSelection(index);
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
   }
   /*-------------------------------------------------*/
   /*                L i s t e n e r s                */
@@ -131,7 +143,7 @@ export class KupList {
         case 'Enter':
           e.preventDefault();
           e.stopPropagation();
-          this.handleSelection(this.focused);
+          __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, this.focused);
           break;
       }
     }
@@ -139,14 +151,6 @@ export class KupList {
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */
   /*-------------------------------------------------*/
-  watchFilter() {
-    this.filteredItems = [];
-    let index = 0;
-    this.data.map((item) => {
-      this.setUnselected(item, index++);
-    });
-    this.data = [...this.data];
-  }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
@@ -168,10 +172,10 @@ export class KupList {
     else {
       this.focused++;
     }
-    if (this.focused > this.listItems.length - 1) {
+    if (this.focused > __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1) {
       this.focused = 0;
     }
-    this.listItems[this.focused].focus();
+    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
   }
   /**
    * Focuses the previous element of the list.
@@ -192,9 +196,9 @@ export class KupList {
       this.focused--;
     }
     if (this.focused < 0) {
-      this.focused = this.listItems.length - 1;
+      this.focused = __classPrivateFieldGet(this, _KupList_listItems, "f").length - 1;
     }
-    this.listItems[this.focused].focus();
+    __classPrivateFieldGet(this, _KupList_listItems, "f")[this.focused].focus();
   }
   /**
    * Used to retrieve component's props values.
@@ -210,13 +214,6 @@ export class KupList {
   async refresh() {
     forceUpdate(this);
   }
-  /**
-   * Resets filter.
-   * @todo FOSLUC to PASCAR: why isn't it enough to change only the prop?
-   */
-  async resetFilter(newFilter) {
-    this.filter = newFilter;
-  }
   /**
    * 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.
@@ -225,7 +222,7 @@ export class KupList {
     if (index === undefined) {
       index = this.focused;
     }
-    this.handleSelection(index);
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_handleSelection).call(this, index);
   }
   /**
    * Sets the props to the component.
@@ -235,227 +232,11 @@ export class KupList {
     setProps(this, KupListProps, props);
   }
   /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  /**
-   * Selects the specified 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.
-   */
-  handleSelection(index) {
-    if (index !== null && index !== undefined && !isNaN(index)) {
-      const value = this.data[index].value;
-      switch (this.roleType) {
-        case KupListRole.GROUP:
-          if (this.selected.includes(value)) {
-            this.selected.splice(this.selected.indexOf(value), 1);
-          }
-          else {
-            this.selected.push(value);
-          }
-          this.selected = new Array(...this.selected);
-          break;
-        default:
-          this.selected = new Array(value);
-          break;
-      }
-      for (let index = 0; index < this.data.length; index++) {
-        const item = this.data[index];
-        if (this.selected.includes(item.value)) {
-          item.selected = true;
-        }
-        else {
-          item.selected = false;
-        }
-      }
-      this.kupClick.emit({
-        comp: this,
-        id: this.rootElement.id,
-        selected: this.data[index],
-      });
-    }
-  }
-  renderSeparator() {
-    return h("li", { role: "separator", class: "list-divider" });
-  }
-  renderListItem(item, index) {
-    this.filteredItems[index] = item;
-    if (item.selected != true) {
-      item.selected = false;
-    }
-    let imageTag = undefined;
-    if (this.showIcons == true &&
-      item.icon != null &&
-      item.icon.trim() != '') {
-      imageTag = this.getIconTag(item.icon);
-    }
-    let primaryTextTag = [
-      getValueOfItemByDisplayMode(item, this.displayMode, ' - '),
-    ];
-    let secTextTag = [];
-    if (this.twoLine && item.secondaryText && item.secondaryText != '') {
-      primaryTextTag = [
-        h("span", { class: "list-item__primary-text" }, item.text),
-      ];
-      secTextTag = [
-        h("span", { class: "list-item__secondary-text" }, item.secondaryText),
-      ];
-    }
-    let classAttr = 'list-item';
-    let tabIndexAttr = item.selected == true ? '0' : '-1';
-    if (item.selected == true && this.isListBoxRule()) {
-      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 (this.isRadioButtonRule()) {
-      roleAttr = 'radio';
-      ariaCheckedAttr = item.selected == true ? 'true' : 'false';
-      let dataTmp = [
-        {
-          value: item.value,
-          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) => (this.radios[index] = el) })),
-        imageTag,
-        h("label", { class: "list-item__text", htmlFor: this.rootElement.id + '_' + index },
-          primaryTextTag,
-          secTextTag),
-      ];
-    }
-    else if (this.isCheckBoxRule()) {
-      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) => {
-        this.listItems.push(el);
-      }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-value": item.value, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
-        ? (e) => e.stopPropagation()
-        : () => this.onKupBlur(index), onFocus: !this.selectable
-        ? (e) => e.stopPropagation()
-        : () => this.onKupFocus(index), onClick: !this.selectable
-        ? (e) => e.stopPropagation()
-        : () => this.onKupClick(index) }, innerSpanTag));
-    return vNodes;
-  }
-  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` })));
-  }
-  setUnselected(item, index) {
-    item.selected = false;
-    this.sendInfoToSubComponent(index, item);
-  }
-  setSelected(item, index) {
-    item.selected = true;
-    this.sendInfoToSubComponent(index, item);
-  }
-  sendInfoToSubComponent(index, item) {
-    if (this.isRadioButtonRule()) {
-      if (this.radios[index]) {
-        let dataTmp = [
-          {
-            value: item.value,
-            label: '',
-            checked: item.selected == true ? true : false,
-          },
-        ];
-        this.radios[index].data = dataTmp;
-      }
-    }
-  }
-  getLiIndexElementForValue(key) {
-    let index = -1;
-    let i = 0;
-    this.filteredItems.forEach((item) => {
-      if (item.value == key) {
-        index = i;
-      }
-      i++;
-    });
-    return index;
-  }
-  isSingleSelection() {
-    return this.isRadioButtonRule() || this.isListBoxRule();
-  }
-  isMultiSelection() {
-    return this.isCheckBoxRule();
-  }
-  isCheckBoxRule() {
-    return this.roleType == KupListRole.GROUP;
-  }
-  isRadioButtonRule() {
-    return this.roleType == KupListRole.RADIOGROUP;
-  }
-  isListBoxRule() {
-    return this.roleType == KupListRole.LISTBOX;
-  }
-  checkRoleType() {
-    if (!this.isCheckBoxRule() && !this.isRadioButtonRule()) {
-      this.roleType = KupListRole.LISTBOX;
-    }
-  }
-  itemCompliant(item) {
-    if (!this.filter) {
-      return true;
-    }
-    if (this.displayMode == ItemsDisplayMode.CODE) {
-      return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
-    }
-    if (this.displayMode == ItemsDisplayMode.DESCRIPTION) {
-      return (item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
-    }
-    return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
-      item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
-  }
-  /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.theme.register(this);
+    __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) {
@@ -464,10 +245,10 @@ export class KupList {
     }
   }
   componentDidLoad() {
-    this.kupManager.debug.logLoad(this, true);
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, false);
   }
   componentDidRender() {
     if (this.isMenu &&
@@ -478,10 +259,10 @@ export class KupList {
         this.rootElement.focus();
       }, 0);
     }
-    this.kupManager.debug.logRender(this, true);
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").debug.logRender(this, true);
   }
   render() {
-    this.listItems = [];
+    __classPrivateFieldSet(this, _KupList_listItems, [], "f");
     let componentClass = 'list';
     let wrapperClass = undefined;
     if (this.isMenu) {
@@ -490,7 +271,7 @@ export class KupList {
         wrapperClass += ' visible';
       }
     }
-    this.checkRoleType();
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_checkRoleType).call(this);
     if (this.selectable != true) {
       componentClass += ' list--non-interactive';
     }
@@ -500,23 +281,25 @@ export class KupList {
     if (this.hideText) {
       componentClass += ' text-hidden';
     }
+    if (!this.data || this.data.length === 0) {
+      componentClass += ' list--empty';
+    }
     let roleAttr = this.roleType;
     let ariaMultiSelectable = 'false';
-    if (this.isMultiSelection()) {
+    if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isMultiSelection).call(this)) {
       ariaMultiSelectable = 'true';
     }
-    this.filteredItems = [];
-    this.radios = [];
+    __classPrivateFieldSet(this, _KupList_radios, [], "f");
     let index = 0;
     return (h(Host, null,
-      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
+      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, id: 'kup-list_' + this.rootElement.id, "aria-multiselectable": ariaMultiSelectable }, this.data
-          .filter((item) => this.itemCompliant(item))
-          .map((item) => this.renderListItem(item, index++))))));
+        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() {
-    this.kupManager.theme.unregister(this);
+    __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.unregister(this);
   }
   static get is() { return "kup-list"; }
   static get encapsulation() { return "shadow"; }
@@ -950,28 +733,6 @@ export class KupList {
         "tags": []
       }
     },
-    "resetFilter": {
-      "complexType": {
-        "signature": "(newFilter: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets filter.",
-        "tags": [{
-            "name": "todo",
-            "text": "FOSLUC to PASCAR: why isn't it enough to change only the prop?"
-          }]
-      }
-    },
     "select": {
       "complexType": {
         "signature": "(index?: number) => Promise<void>",
@@ -1028,10 +789,6 @@ export class KupList {
     }
   }; }
   static get elementRef() { return "rootElement"; }
-  static get watchers() { return [{
-      "propName": "filter",
-      "methodName": "watchFilter"
-    }]; }
   static get listeners() { return [{
       "name": "keydown",
       "method": "listenKeydown",
@@ -1040,3 +797,177 @@ export class KupList {
       "passive": false
     }]; }
 }
+_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_setUnselected = function _KupList_setUnselected(item, index) {
+  item.selected = false;
+  __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_sendInfoToSubComponent).call(this, index, item);
+}, _KupList_sendInfoToSubComponent = function _KupList_sendInfoToSubComponent(index, item) {
+  if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
+    if (__classPrivateFieldGet(this, _KupList_radios, "f")[index]) {
+      let dataTmp = [
+        {
+          value: item.value,
+          label: '',
+          checked: item.selected == true ? true : false,
+        },
+      ];
+      __classPrivateFieldGet(this, _KupList_radios, "f")[index].data = dataTmp;
+    }
+  }
+}, _KupList_handleSelection = function _KupList_handleSelection(index) {
+  if (index !== null && index !== undefined && !isNaN(index)) {
+    const listItems = this.rootElement.shadowRoot.querySelectorAll('.list-item');
+    const value = listItems[index].dataset.value;
+    const dataEl = this.data.find((x) => x.value === value);
+    switch (this.roleType) {
+      case KupListRole.GROUP:
+        if (this.selected.includes(value)) {
+          this.selected.splice(this.selected.indexOf(value), 1);
+        }
+        else {
+          this.selected.push(value);
+        }
+        this.selected = new Array(...this.selected);
+        break;
+      default:
+        this.selected = new Array(value);
+        break;
+    }
+    for (let index = 0; index < this.data.length; index++) {
+      const item = this.data[index];
+      item.selected = this.selected.includes(item.value);
+    }
+    this.kupClick.emit({
+      comp: this,
+      id: this.rootElement.id,
+      selected: dataEl,
+    });
+  }
+}, _KupList_renderListItem = function _KupList_renderListItem(item, index) {
+  if (item.selected != true) {
+    item.selected = false;
+  }
+  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 = [
+    getValueOfItemByDisplayMode(item, this.displayMode, ' - '),
+  ];
+  let secTextTag = [];
+  if (this.twoLine && item.secondaryText && item.secondaryText != '') {
+    primaryTextTag = [
+      h("span", { class: "list-item__primary-text" }, item.text),
+    ];
+    secTextTag = [
+      h("span", { class: "list-item__secondary-text" }, item.secondaryText),
+    ];
+  }
+  let classAttr = 'list-item';
+  let tabIndexAttr = item.selected == true ? '0' : '-1';
+  if (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.value,
+        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-value": item.value, "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()
+      : () => this.onKupClick(index) }, innerSpanTag));
+  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;
+  }
+  if (this.displayMode == ItemsDisplayMode.CODE) {
+    return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+  }
+  if (this.displayMode == ItemsDisplayMode.DESCRIPTION) {
+    return (item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+  }
+  return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
+    item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+};

package/dist/collection/components/kup-magic-box/kup-magic-box-declarations.js

@@ -10,10 +10,14 @@ export var KupMagicBoxProps;
 /**
  * Viable display modes selectable in kup-magic-box.
  */
-export var MagicBoxDisplay;
-(function (MagicBoxDisplay) {
-  MagicBoxDisplay["BOX"] = "Box";
-  MagicBoxDisplay["CHART"] = "Chart";
-  MagicBoxDisplay["DATATABLE"] = "Datatable";
-  MagicBoxDisplay["JSON"] = "JSON";
-})(MagicBoxDisplay || (MagicBoxDisplay = {}));
+export var KupMagicBoxDisplay;
+(function (KupMagicBoxDisplay) {
+  KupMagicBoxDisplay["BOX"] = "Box";
+  KupMagicBoxDisplay["BUTTON_LIST"] = "Button List";
+  KupMagicBoxDisplay["CHART"] = "Chart";
+  KupMagicBoxDisplay["CHIP"] = "Chip";
+  KupMagicBoxDisplay["ECHART"] = "Echart";
+  KupMagicBoxDisplay["DATATABLE"] = "Datatable";
+  KupMagicBoxDisplay["JSON"] = "JSON";
+  KupMagicBoxDisplay["TREE"] = "Tree";
+})(KupMagicBoxDisplay || (KupMagicBoxDisplay = {}));