@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

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

@@ -1,791 +0,0 @@
-import { Host, h, } from "@stencil/core";
-import { debounce, generateUUID, MapDOM } from "../../utils/utils";
-import info from "../../media/svg-imgs/icon-info.svg";
-import infoGreen from "../../media/svg-imgs/icon-info-green.svg";
-class CollapseListItem {
-}
-export class PtcCollapseList {
-  constructor() {
-    this.data = undefined;
-    this.searchText = undefined;
-    this.showSearchBar = true;
-    this.header = undefined;
-    this.trackerId = 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;
-    this.allowMultiSelect = true;
-  }
-  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);
-    this.openList();
-  }
-  openList() {
-    var _a;
-    const listitem = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".listOpen");
-    listitem.forEach((item) => {
-      if (item.classList.contains("listOpen")) {
-        item === null || item === void 0 ? void 0 : item.classList.add("expanded");
-        const ulElement = item === null || item === void 0 ? void 0 : item.querySelector("ul");
-        if (ulElement) {
-          ulElement.style.maxHeight = `${ulElement.scrollHeight}px`;
-        }
-      }
-    });
-  }
-  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() {
-    let counter = 0;
-    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;
-            newItem.trackerId = z.trackerId
-              ? z.trackerId
-              : `${this.trackerId}-list-item-${counter++}`;
-            if (z.linkHref) {
-              newItem.href = z.linkHref;
-              newItem.target = z.linkTarget;
-              newItem.title = z.linkTitle;
-              newItem.text = z.facetDisplay;
-              newItem.id = generateUUID();
-            }
-            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";
-              newItem.enableSearch = z.enableSearch == "true";
-              newItem.searchBoxPlaceholder = z.placeholderText;
-              newItem.tooltip = z.tooltip;
-              this.setUpCategory(newItem.category, newItem.allowMultiSelect);
-              // Ensure listOpened is set based on is-list-opened attribute
-              newItem.listOpened = z.hasOwnProperty("listOpened");
-            }
-            if (z.collapseListItem) {
-              newItem.children = new Array();
-              if (!Array.isArray(z.collapseListItem)) {
-                let tempArr = new Array();
-                tempArr.push(z.collapseListItem);
-                buildChildren(tempArr, newItem.children);
-              }
-              else {
-                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");
-            let childAnchorItems = ul.querySelectorAll("a");
-            if (childAnchorItems) {
-              childAnchorItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = -1;
-                }
-              });
-            }
-            let childInputsItems = ul.querySelectorAll("input");
-            if (childInputsItems) {
-              childInputsItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = -1;
-                }
-              });
-            }
-          }
-          else {
-            ul.style.maxHeight = ul.scrollHeight + "px";
-            let level1Parent = ul.closest(".level-1");
-            if (level1Parent) {
-              if (level1Parent.classList.contains("expanded")) {
-                if (ul.childNodes) {
-                  ul.childNodes.forEach((child) => {
-                    if (child.children[0] &&
-                      child.children[0].tagName !=
-                        "DIV") {
-                      child.children[0].setAttribute("tabindex", "0");
-                    }
-                  });
-                }
-              }
-            }
-            let childInputsItems = ul.querySelectorAll("input");
-            if (childInputsItems) {
-              childInputsItems.forEach((child) => {
-                if (child) {
-                  child.tabIndex = 0;
-                }
-              });
-            }
-          }
-        }
-      });
-      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;
-  }
-  onItemFilterSearchUpdate(e) {
-    if (e && e.target) {
-      let input = e.target;
-      let search = input.value;
-      if (input) {
-        let items = input
-          .closest("ul")
-          .querySelectorAll("li:not(.search-box-wrapper)");
-        if (search && search.length > 0) {
-          items.forEach((item) => {
-            var _a;
-            let content = (_a = item === null || item === void 0 ? void 0 : item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            if (content && content.indexOf(search) > -1) {
-              item.style.removeProperty("display");
-            }
-            else {
-              item.style.display = "none";
-            }
-          });
-        }
-        else {
-          items.forEach((item) => {
-            item.style.removeProperty("display");
-          });
-        }
-      }
-      this.updateExpandedItems();
-    }
-  }
-  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 renderToolTip = (tooltip) => {
-      if (tooltip) {
-        return (h("ptc-tooltip", { "text-display": "inline", mode: "wrapper", "z-index": "z-2", position: "bottom", description: "" }, h("div", { class: "icon-wrapper" }, h("i", { class: "active-icon", innerHTML: infoGreen }), h("i", { class: "inactive-icon", innerHTML: info })), h("span", { class: "popup", slot: "description" }, h("i", { innerHTML: infoGreen }), h("div", { class: "content", innerHTML: tooltip }))));
-      }
-    };
-    let renderLevel = (arr, level, searchOptions) => {
-      let levelClass = `level-${level} mf-listen`;
-      let tId = this.trackerId ? `${this.trackerId}-${levelClass}` : "";
-      return (h("ul", null, searchOptions && (h("li", { class: "search-box-wrapper" }, h("div", { id: tId, class: "search-box mf-listen" }, h("input", { class: "search-box", id: "searchBoxId", type: "text", placeholder: searchOptions.placeholder, tabIndex: -1, onKeyUp: (e) => {
-          this.onItemFilterSearchUpdate(e);
-        }, onBlur: (e) => {
-          this.onItemFilterSearchUpdate(e);
-        } })))), arr.map((z) => {
-        let expandable = false;
-        let selectable = false;
-        let icon;
-        let searchOptions = undefined;
-        if (z.enableSearch) {
-          searchOptions = {
-            placeholder: z.searchBoxPlaceholder,
-          };
-        }
-        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", { id: z.trackerId, class: {
-            [levelClass]: true,
-            listOpen: z.listOpened,
-          } }, getLink(z, icon, level, expandable, selectable), z.children
-          ? renderLevel(z.children, level + 1, searchOptions)
-          : ""));
-      })));
-    };
-    let getLink = (item, icon, level, expandable, selectable) => {
-      let clickEvent = (e) => {
-        if (expandable) {
-          this.onExpandClick(e, this.allowMultiSelect && level == 1);
-        }
-        else {
-          this.onItemLinkClick(e, item.id);
-        }
-      };
-      let tooltip = level == 1 ? item.tooltip : undefined;
-      let tabIndexValue = level == 1 ? 0 : -1;
-      if (item.isExternalLink) {
-        return (h("a", { href: item.href, id: item.id, target: item.target, title: item.title, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
-      }
-      else if ((!expandable && selectable) ||
-        (expandable && !selectable)) {
-        return (h("a", { href: "#", id: item.id, title: item.text, onClick: clickEvent, tabindex: tabIndexValue }, icon, item.text, renderToolTip(tooltip)));
-      }
-      else {
-        return [
-          h("a", { class: "expander-icon", href: "#", id: item.id, onClick: (e) => {
-              this.onExpandClick(e, false);
-            }, tabindex: tabIndexValue }, icon),
-          h("a", { href: "#", title: item.text, id: item.id, onClick: (e) => {
-              this.onItemLinkClick(e, item.id);
-            }, tabindex: tabIndexValue }, item.text),
-          renderToolTip(tooltip),
-        ];
-      }
-    };
-    // Ignore search bar if the showSearchBar is false
-    if (!this.showSearchBar) {
-      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), renderLevel(this.data, 1))));
-    }
-    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", { id: `${this.trackerId}-search-box`, class: "search-box mf-listen" }, h("input", { type: "text", id: "searchBoxId", 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 {
-      "showSearchBar": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show-search-bar",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "header",
-        "reflect": false
-      },
-      "trackerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tracker-id",
-        "reflect": false
-      },
-      "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
-      },
-      "allowMultiSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "allow-multi-select",
-        "reflect": false,
-        "defaultValue": "true"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "data": {},
-      "searchText": {},
-      "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"; }
-}