@ptcwebops/ptcw-design 0.7.9 → 0.8.1

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js

@@ -1,570 +1,570 @@
-import { Host, h } from '@stencil/core';
-import { debounce, generateUUID, MapDOM } from '../../utils/utils';
-class CollapseListItem {
-}
-export class PtcCollapseList {
-  constructor() {
-    this.data = undefined;
-    this.searchText = undefined;
-    this.header = undefined;
-    this.selectedValue = undefined;
-    this.selectedItems = undefined;
-    this.hashMap = undefined;
-    this.debouncedUpdatedEvent = undefined;
-    this.refreshBuffer = undefined;
-    this.listItems = undefined;
-    this.placeholderText = undefined;
-    this.debounceUpdateDelay = undefined;
-  }
-  componentWillLoad() {
-    this.loadListItems();
-    this.selectedItems = [];
-  }
-  componentDidLoad() {
-    this.ready.emit({
-      sender: this.el,
-      tree: this.data,
-      search: this.searchText
-    });
-    let event = () => {
-      this.changed.emit({
-        sender: this.el,
-        selectedValue: this.selectedValue,
-        selectedItems: this.selectedItems,
-        search: this.searchText
-      });
-    };
-    this.debouncedUpdatedEvent = debounce(event, this.debounceUpdateDelay, this);
-  }
-  componentDidUpdate() {
-    this.viewUpdated.emit({
-      sender: this.el,
-      tree: this.data,
-      search: this.searchText
-    });
-  }
-  onItemSelectedHandler(event) {
-    this.itemSelected.emit({
-      event: event,
-      sender: event ? event.target : this.el,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data
-    });
-    this.fireChangedEvent();
-  }
-  onInputUpdated(event) {
-    let input = event.target;
-    this.searchText = input.value;
-    this.inputUpdated.emit({
-      event: event,
-      sender: input,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data,
-      search: this.searchText
-    });
-    this.fireChangedEvent();
-  }
-  onItemExpandedHandler(event) {
-    this.itemExpanded.emit({
-      event: event,
-      sender: event ? event.target : this.el,
-      selectedValue: this.selectedValue,
-      selectedItems: this.selectedItems,
-      tree: this.data
-    });
-  }
-  fireChangedEvent() {
-    this.debouncedUpdatedEvent();
-  }
-  loadListItems() {
-    this.hashMap = {};
-    if (!this.data) {
-      let dom = MapDOM(this.el);
-      if (dom.collapseListItem) {
-        this.data = new Array();
-        let buildChildren = (arr, outArr) => {
-          arr.map((z) => {
-            var newItem = new CollapseListItem();
-            newItem.isExternalLink = z.linkHref ? true : false;
-            if (z.linkHref) {
-              newItem.href = z.linkHref;
-              newItem.target = z.linkTarget;
-              newItem.title = z.linkTitle;
-            }
-            else {
-              newItem.id = generateUUID();
-              newItem.text = z.facetDisplay;
-              newItem.name = z.facetName;
-              newItem.value = z.facetValue;
-              newItem.category = z.category;
-              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
-              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
-            }
-            if (z.collapseListItem) {
-              newItem.children = new Array();
-              buildChildren(z.collapseListItem, newItem.children);
-            }
-            this.hashMap[newItem.id] = newItem;
-            outArr.push(newItem);
-          });
-        };
-        this.setUpCategory('default', true);
-        buildChildren(dom.collapseListItem, this.data);
-      }
-    }
-  }
-  setUpCategory(name, allowMultiSelect) {
-    if (!this.selectedValue) {
-      this.selectedValue = {};
-    }
-    if (name && !this.selectedValue[name]) {
-      this.selectedValue[name] = {
-        name: name,
-        items: new Array(),
-        allowMultiSelect: allowMultiSelect
-      };
-    }
-  }
-  collapseAllFirstLevelItems(exclude) {
-    let items = this.el.shadowRoot.querySelectorAll('.level-1');
-    items.forEach((z) => {
-      if (z.classList.contains('expanded') && z != exclude) {
-        z.classList.remove('expanded');
-      }
-    });
-  }
-  updateExpandedItems() {
-    const redraw = (timestamp) => {
-      if (!this.refreshBuffer) {
-        this.refreshBuffer = timestamp;
-      }
-      const elapsed = timestamp - this.refreshBuffer;
-      let items = this.el.shadowRoot.querySelectorAll('li');
-      items.forEach((z) => {
-        let ul = z.querySelector(':scope > ul');
-        if (ul) {
-          if (!z.classList.contains('expanded')) {
-            ul.style.removeProperty('max-height');
-          }
-          else {
-            ul.style.maxHeight = ul.scrollHeight + "px";
-          }
-        }
-      });
-      if (elapsed < 2500) {
-        window.requestAnimationFrame(redraw);
-      }
-      else {
-        this.refreshBuffer = undefined;
-      }
-    };
-    if (!this.refreshBuffer) {
-      window.requestAnimationFrame(redraw);
-    }
-    else {
-      this.refreshBuffer = undefined;
-    }
-  }
-  updateSelectedItemStatus(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) < 0) {
-        if (this.selectedValue[categoryName].allowMultiSelect) {
-          items.push(selectedItem.value);
-        }
-        else {
-          this.selectedItems = this.selectedItems.filter((z) => { return z.value != items[0]; });
-          items = [selectedItem.value];
-        }
-        this.selectedItems.push(selectedItem);
-      }
-      else {
-        items = items.filter((z) => { return z != selectedItem.value; });
-        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  unSelectItem(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) > -1) {
-        items = items.filter((z) => { return z != selectedItem.value; });
-        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  selectItem(uuid) {
-    var _a;
-    let selectedItem = this.hashMap[uuid];
-    if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
-      if (!this.selectedValue[categoryName]) {
-        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
-      }
-      let items = this.selectedValue[categoryName].items;
-      if (items.indexOf(selectedItem.value) < 0) {
-        if (this.selectedValue[categoryName].allowMultiSelect) {
-          items.push(selectedItem.value);
-        }
-        else {
-          items = [selectedItem.value];
-        }
-        this.selectedItems.push(selectedItem);
-      }
-      this.selectedValue[categoryName].items = items;
-    }
-  }
-  getItemByValue(value) {
-    let result;
-    if (this.hashMap) {
-      for (const [_, v] of Object.entries(this.hashMap)) {
-        let item = v;
-        if (item.value == value) {
-          result = item;
-          break;
-        }
-      }
-    }
-    return result;
-  }
-  onItemLinkClick(event, uuid) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.updateSelectedItemStatus(uuid);
-    this.onItemSelectedHandler(event);
-  }
-  onExpandClick(event, collapseParents) {
-    if (event) {
-      event.preventDefault();
-      let sender = event.currentTarget;
-      let root = sender.closest('.level-1');
-      let parent = sender.closest('li');
-      if (collapseParents) {
-        this.collapseAllFirstLevelItems(root);
-      }
-      if (parent) {
-        parent.classList.toggle("expanded");
-      }
-      if (sender.classList.contains('expander-icon')) {
-        let icon = parent.classList.contains('expanded') ? 'minus' : 'plus';
-        sender.querySelector('icon-asset').setAttribute('name', icon);
-      }
-      this.updateExpandedItems();
-    }
-    this.onItemExpandedHandler(event);
-  }
-  render() {
-    let renderLevel = (arr, level) => {
-      let levelClass = `level-${level}`;
-      return (h("ul", null, arr.map((z) => {
-        let expandable = false;
-        let selectable = false;
-        let icon;
-        if (level == 1) {
-          if (z.children) {
-            expandable = true;
-            selectable = false;
-            icon = (h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
-          }
-          else {
-            expandable = false;
-            selectable = true;
-            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "ptc-green", size: "medium" }));
-          }
-        }
-        else if (level > 1) {
-          selectable = true;
-          if (z.children) {
-            expandable = true;
-            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "gray", size: "xxx-small" }));
-          }
-          else {
-            expandable = false;
-          }
-        }
-        return (h("li", { class: levelClass }, getLink(z, icon, level, expandable, selectable), z.children ? renderLevel(z.children, level + 1) : ''));
-      })));
-    };
-    let getLink = (item, icon, level, expandable, selectable) => {
-      let clickEvent = (e) => {
-        if (expandable) {
-          this.onExpandClick(e, level == 1);
-        }
-        else {
-          this.onItemLinkClick(e, item.id);
-        }
-      };
-      if (item.isExternalLink) {
-        return (h("a", { href: item.href, target: item.target, title: item.title }, icon, item.text));
-      }
-      else if ((!expandable && selectable) || (expandable && !selectable)) {
-        return (h("a", { href: "#", title: item.text, onClick: clickEvent }, icon, item.text));
-      }
-      else {
-        return [
-          h("a", { class: "expander-icon", href: "#", onClick: (e) => { this.onExpandClick(e, false); } }, icon),
-          h("a", { href: "#", title: item.text, onClick: (e) => { this.onItemLinkClick(e, item.id); } }, item.text)
-        ];
-      }
-    };
-    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { class: "search-box" }, h("input", { type: "text", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
-  }
-  async removeSelectedItem(value) {
-    let item = this.getItemByValue(value);
-    this.unSelectItem(item.id);
-    this.fireChangedEvent();
-  }
-  async addSelectedItem(value) {
-    let item = this.getItemByValue(value);
-    this.selectItem(item.id);
-  }
-  static get is() { return "ptc-collapse-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-collapse-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-collapse-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "listItems": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "placeholderText": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder-text",
-        "reflect": false
-      },
-      "debounceUpdateDelay": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "500",
-          "resolved": "500",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "debounce-update-delay",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "data": {},
-      "searchText": {},
-      "header": {},
-      "selectedValue": {},
-      "selectedItems": {},
-      "hashMap": {},
-      "debouncedUpdatedEvent": {},
-      "refreshBuffer": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "itemExpanded",
-        "name": "itemExpanded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "textChanged",
-        "name": "textChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "inputUpdated",
-        "name": "inputUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "ready",
-        "name": "ready",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "viewUpdated",
-        "name": "viewUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "changed",
-        "name": "changed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "removeSelectedItem": {
-        "complexType": {
-          "signature": "(value: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "addSelectedItem": {
-        "complexType": {
-          "signature": "(value: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+import { debounce, generateUUID, MapDOM } from '../../utils/utils';
+class CollapseListItem {
+}
+export class PtcCollapseList {
+  constructor() {
+    this.data = undefined;
+    this.searchText = undefined;
+    this.header = undefined;
+    this.selectedValue = undefined;
+    this.selectedItems = undefined;
+    this.hashMap = undefined;
+    this.debouncedUpdatedEvent = undefined;
+    this.refreshBuffer = undefined;
+    this.listItems = undefined;
+    this.placeholderText = undefined;
+    this.debounceUpdateDelay = undefined;
+  }
+  componentWillLoad() {
+    this.loadListItems();
+    this.selectedItems = [];
+  }
+  componentDidLoad() {
+    this.ready.emit({
+      sender: this.el,
+      tree: this.data,
+      search: this.searchText
+    });
+    let event = () => {
+      this.changed.emit({
+        sender: this.el,
+        selectedValue: this.selectedValue,
+        selectedItems: this.selectedItems,
+        search: this.searchText
+      });
+    };
+    this.debouncedUpdatedEvent = debounce(event, this.debounceUpdateDelay, this);
+  }
+  componentDidUpdate() {
+    this.viewUpdated.emit({
+      sender: this.el,
+      tree: this.data,
+      search: this.searchText
+    });
+  }
+  onItemSelectedHandler(event) {
+    this.itemSelected.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedValue: this.selectedValue,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+    this.fireChangedEvent();
+  }
+  onInputUpdated(event) {
+    let input = event.target;
+    this.searchText = input.value;
+    this.inputUpdated.emit({
+      event: event,
+      sender: input,
+      selectedValue: this.selectedValue,
+      selectedItems: this.selectedItems,
+      tree: this.data,
+      search: this.searchText
+    });
+    this.fireChangedEvent();
+  }
+  onItemExpandedHandler(event) {
+    this.itemExpanded.emit({
+      event: event,
+      sender: event ? event.target : this.el,
+      selectedValue: this.selectedValue,
+      selectedItems: this.selectedItems,
+      tree: this.data
+    });
+  }
+  fireChangedEvent() {
+    this.debouncedUpdatedEvent();
+  }
+  loadListItems() {
+    this.hashMap = {};
+    if (!this.data) {
+      let dom = MapDOM(this.el);
+      if (dom.collapseListItem) {
+        this.data = new Array();
+        let buildChildren = (arr, outArr) => {
+          arr.map((z) => {
+            var newItem = new CollapseListItem();
+            newItem.isExternalLink = z.linkHref ? true : false;
+            if (z.linkHref) {
+              newItem.href = z.linkHref;
+              newItem.target = z.linkTarget;
+              newItem.title = z.linkTitle;
+            }
+            else {
+              newItem.id = generateUUID();
+              newItem.text = z.facetDisplay;
+              newItem.name = z.facetName;
+              newItem.value = z.facetValue;
+              newItem.category = z.category;
+              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
+              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
+            }
+            if (z.collapseListItem) {
+              newItem.children = new Array();
+              buildChildren(z.collapseListItem, newItem.children);
+            }
+            this.hashMap[newItem.id] = newItem;
+            outArr.push(newItem);
+          });
+        };
+        this.setUpCategory('default', true);
+        buildChildren(dom.collapseListItem, this.data);
+      }
+    }
+  }
+  setUpCategory(name, allowMultiSelect) {
+    if (!this.selectedValue) {
+      this.selectedValue = {};
+    }
+    if (name && !this.selectedValue[name]) {
+      this.selectedValue[name] = {
+        name: name,
+        items: new Array(),
+        allowMultiSelect: allowMultiSelect
+      };
+    }
+  }
+  collapseAllFirstLevelItems(exclude) {
+    let items = this.el.shadowRoot.querySelectorAll('.level-1');
+    items.forEach((z) => {
+      if (z.classList.contains('expanded') && z != exclude) {
+        z.classList.remove('expanded');
+      }
+    });
+  }
+  updateExpandedItems() {
+    const redraw = (timestamp) => {
+      if (!this.refreshBuffer) {
+        this.refreshBuffer = timestamp;
+      }
+      const elapsed = timestamp - this.refreshBuffer;
+      let items = this.el.shadowRoot.querySelectorAll('li');
+      items.forEach((z) => {
+        let ul = z.querySelector(':scope > ul');
+        if (ul) {
+          if (!z.classList.contains('expanded')) {
+            ul.style.removeProperty('max-height');
+          }
+          else {
+            ul.style.maxHeight = ul.scrollHeight + "px";
+          }
+        }
+      });
+      if (elapsed < 2500) {
+        window.requestAnimationFrame(redraw);
+      }
+      else {
+        this.refreshBuffer = undefined;
+      }
+    };
+    if (!this.refreshBuffer) {
+      window.requestAnimationFrame(redraw);
+    }
+    else {
+      this.refreshBuffer = undefined;
+    }
+  }
+  updateSelectedItemStatus(uuid) {
+    var _a;
+    let selectedItem = this.hashMap[uuid];
+    if (selectedItem && selectedItem.value) {
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      if (!this.selectedValue[categoryName]) {
+        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
+      }
+      let items = this.selectedValue[categoryName].items;
+      if (items.indexOf(selectedItem.value) < 0) {
+        if (this.selectedValue[categoryName].allowMultiSelect) {
+          items.push(selectedItem.value);
+        }
+        else {
+          this.selectedItems = this.selectedItems.filter((z) => { return z.value != items[0]; });
+          items = [selectedItem.value];
+        }
+        this.selectedItems.push(selectedItem);
+      }
+      else {
+        items = items.filter((z) => { return z != selectedItem.value; });
+        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
+      }
+      this.selectedValue[categoryName].items = items;
+    }
+  }
+  unSelectItem(uuid) {
+    var _a;
+    let selectedItem = this.hashMap[uuid];
+    if (selectedItem && selectedItem.value) {
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      if (!this.selectedValue[categoryName]) {
+        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
+      }
+      let items = this.selectedValue[categoryName].items;
+      if (items.indexOf(selectedItem.value) > -1) {
+        items = items.filter((z) => { return z != selectedItem.value; });
+        this.selectedItems = this.selectedItems.filter((z) => { return z.value != selectedItem.value; });
+      }
+      this.selectedValue[categoryName].items = items;
+    }
+  }
+  selectItem(uuid) {
+    var _a;
+    let selectedItem = this.hashMap[uuid];
+    if (selectedItem && selectedItem.value) {
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      if (!this.selectedValue[categoryName]) {
+        this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
+      }
+      let items = this.selectedValue[categoryName].items;
+      if (items.indexOf(selectedItem.value) < 0) {
+        if (this.selectedValue[categoryName].allowMultiSelect) {
+          items.push(selectedItem.value);
+        }
+        else {
+          items = [selectedItem.value];
+        }
+        this.selectedItems.push(selectedItem);
+      }
+      this.selectedValue[categoryName].items = items;
+    }
+  }
+  getItemByValue(value) {
+    let result;
+    if (this.hashMap) {
+      for (const [_, v] of Object.entries(this.hashMap)) {
+        let item = v;
+        if (item.value == value) {
+          result = item;
+          break;
+        }
+      }
+    }
+    return result;
+  }
+  onItemLinkClick(event, uuid) {
+    if (event) {
+      event.preventDefault();
+    }
+    this.updateSelectedItemStatus(uuid);
+    this.onItemSelectedHandler(event);
+  }
+  onExpandClick(event, collapseParents) {
+    if (event) {
+      event.preventDefault();
+      let sender = event.currentTarget;
+      let root = sender.closest('.level-1');
+      let parent = sender.closest('li');
+      if (collapseParents) {
+        this.collapseAllFirstLevelItems(root);
+      }
+      if (parent) {
+        parent.classList.toggle("expanded");
+      }
+      if (sender.classList.contains('expander-icon')) {
+        let icon = parent.classList.contains('expanded') ? 'minus' : 'plus';
+        sender.querySelector('icon-asset').setAttribute('name', icon);
+      }
+      this.updateExpandedItems();
+    }
+    this.onItemExpandedHandler(event);
+  }
+  render() {
+    let renderLevel = (arr, level) => {
+      let levelClass = `level-${level}`;
+      return (h("ul", null, arr.map((z) => {
+        let expandable = false;
+        let selectable = false;
+        let icon;
+        if (level == 1) {
+          if (z.children) {
+            expandable = true;
+            selectable = false;
+            icon = (h("icon-asset", { type: "ptc", name: "chevron-down", color: "ptc-green", size: "medium" }));
+          }
+          else {
+            expandable = false;
+            selectable = true;
+            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "ptc-green", size: "medium" }));
+          }
+        }
+        else if (level > 1) {
+          selectable = true;
+          if (z.children) {
+            expandable = true;
+            icon = (h("icon-asset", { type: "ptc", name: "plus", color: "gray", size: "xxx-small" }));
+          }
+          else {
+            expandable = false;
+          }
+        }
+        return (h("li", { class: levelClass }, getLink(z, icon, level, expandable, selectable), z.children ? renderLevel(z.children, level + 1) : ''));
+      })));
+    };
+    let getLink = (item, icon, level, expandable, selectable) => {
+      let clickEvent = (e) => {
+        if (expandable) {
+          this.onExpandClick(e, level == 1);
+        }
+        else {
+          this.onItemLinkClick(e, item.id);
+        }
+      };
+      if (item.isExternalLink) {
+        return (h("a", { href: item.href, target: item.target, title: item.title }, icon, item.text));
+      }
+      else if ((!expandable && selectable) || (expandable && !selectable)) {
+        return (h("a", { href: "#", title: item.text, onClick: clickEvent }, icon, item.text));
+      }
+      else {
+        return [
+          h("a", { class: "expander-icon", href: "#", onClick: (e) => { this.onExpandClick(e, false); } }, icon),
+          h("a", { href: "#", title: item.text, onClick: (e) => { this.onItemLinkClick(e, item.id); } }, item.text)
+        ];
+      }
+    };
+    return (h(Host, null, h("div", { class: "container" }, h("ptc-title", { type: 'h2', "title-size": "medium", "title-weight": "w-6", "text-align": 'left', upperline: "no-upperline" }, this.header), h("div", { class: "search-box" }, h("input", { type: "text", placeholder: this.placeholderText, onKeyUp: (e) => { this.onInputUpdated(e); } })), renderLevel(this.data, 1))));
+  }
+  async removeSelectedItem(value) {
+    let item = this.getItemByValue(value);
+    this.unSelectItem(item.id);
+    this.fireChangedEvent();
+  }
+  async addSelectedItem(value) {
+    let item = this.getItemByValue(value);
+    this.selectItem(item.id);
+  }
+  static get is() { return "ptc-collapse-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-collapse-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-collapse-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "listItems": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Object",
+          "resolved": "Object",
+          "references": {
+            "Object": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "placeholderText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder-text",
+        "reflect": false
+      },
+      "debounceUpdateDelay": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "500",
+          "resolved": "500",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "debounce-update-delay",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "data": {},
+      "searchText": {},
+      "header": {},
+      "selectedValue": {},
+      "selectedItems": {},
+      "hashMap": {},
+      "debouncedUpdatedEvent": {},
+      "refreshBuffer": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelected",
+        "name": "itemSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "itemExpanded",
+        "name": "itemExpanded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "textChanged",
+        "name": "textChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "inputUpdated",
+        "name": "inputUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "ready",
+        "name": "ready",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "viewUpdated",
+        "name": "viewUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "changed",
+        "name": "changed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "removeSelectedItem": {
+        "complexType": {
+          "signature": "(value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "addSelectedItem": {
+        "complexType": {
+          "signature": "(value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}