@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/esm/ptc-close-icon_2.entry.js

@@ -8,7 +8,7 @@ const PtcCloseIcon = class {
     registerInstance(this, hostRef);
   }
   render() {
-    return (h(Host, null, h("div", { class: 'close-icon mf-listen', id: "modal-pop-up-close-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", tabindex: 0 }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.00089 8.4151L12.5876 14.0018L14.0018 12.5876L8.4151 7.00089L14.0018 1.41421L12.5876 0L7.00089 5.58667L1.41421 0L0 1.41421L5.58667 7.00089L0 12.5876L1.41421 14.0018L7.00089 8.4151Z", fill: "#20262A" })))));
+    return (h(Host, null, h("div", { class: "close-icon mf-listen", id: "modal-pop-up-close-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", tabindex: 0 }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.00089 8.4151L12.5876 14.0018L14.0018 12.5876L8.4151 7.00089L14.0018 1.41421L12.5876 0L7.00089 5.58667L1.41421 0L0 1.41421L5.58667 7.00089L0 12.5876L1.41421 14.0018L7.00089 8.4151Z", fill: "#20262A" })))));
   }
 };
 PtcCloseIcon.style = ptcCloseIconCss;
@@ -46,7 +46,7 @@ const PtcModal = class {
       }
     };
     this.handleKeyPress = (event) => {
-      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
+      if (event.key === "Enter" || event.key === " " || event.key === "Tab") {
         this.openedByKeyboard = true;
       }
     };
@@ -54,7 +54,7 @@ const PtcModal = class {
       this.openedByKeyboard = false;
     };
     this.iframeUrl = undefined;
-    this.size = 'sm';
+    this.size = "sm";
     this.customClass = undefined;
     this.show = false;
     this.overlay = true;
@@ -65,10 +65,10 @@ const PtcModal = class {
     this.hideContainer = false;
     this.showHeaderFooter = false;
     this.overlayHeight = undefined;
-    this.borderRadius = 'standard';
+    this.borderRadius = "standard";
     this.isBioModal = false;
     this.styles = undefined;
-    this.modalType = 'default-modal';
+    this.modalType = "default-modal";
     this.vhCenter = false;
     this.headerOnlyBg = undefined;
     this.headerOnlyText1 = undefined;
@@ -94,7 +94,7 @@ const PtcModal = class {
   fireOnOpened(modal) {
     this.opened.emit(modal);
     setTimeout(() => {
-      const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
+      const wrapperEle = this.el.shadowRoot.querySelector(".wrapper");
       wrapperEle && wrapperEle.focus();
       this.scrollToTopIfNeeded();
     }, 100);
@@ -123,13 +123,15 @@ const PtcModal = class {
     }, 200);
   }
   scrollToTopIfNeeded() {
-    if (this.el && this.modalType === 'event-listing') {
-      const modalRect = this.el.shadowRoot.querySelector('.modal-body').getBoundingClientRect();
+    if (this.el && this.modalType === "event-listing") {
+      const modalRect = this.el.shadowRoot
+        .querySelector(".modal-body")
+        .getBoundingClientRect();
       const modalTopPosition = modalRect.top + window.scrollY;
       const offset = 160; // Adjust the offset if necessary to account for fixed headers, etc.
       window.scrollTo({
         top: modalTopPosition - offset,
-        behavior: 'smooth',
+        behavior: "smooth",
       });
     }
     else {
@@ -137,39 +139,39 @@ const PtcModal = class {
     }
   }
   connectedCallback() {
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    document.addEventListener('mousedown', this.handleMouseDown, true);
+    document.addEventListener("keydown", this.handleKeyPress, true);
+    document.addEventListener("mousedown", this.handleMouseDown, true);
   }
   disconnectedCallback() {
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    document.removeEventListener('mousedown', this.handleMouseDown, true);
+    document.removeEventListener("keydown", this.handleKeyPress, true);
+    document.removeEventListener("mousedown", this.handleMouseDown, true);
   }
   componentWillLoad() {
-    let body = document.querySelector('body');
+    let body = document.querySelector("body");
     this.bodyOverflowSetting = {
       //overflow: body.style['overflow'],
-      overflowY: body.style['overflowY'],
-      overflowX: body.style['overflowX'],
+      overflowY: body.style["overflowY"],
+      overflowX: body.style["overflowX"],
     };
   }
   componentWillRender() {
-    let body = document.querySelector('body');
+    let body = document.querySelector("body");
     if (body) {
       if (this.show) {
         //body.style['overflow'] = 'hidden';
         if (this.fixed) {
-          body.style['overflowY'] = 'hidden';
-          body.style['overflowX'] = 'hidden';
+          body.style["overflowY"] = "hidden";
+          body.style["overflowX"] = "hidden";
         }
         else {
-          body.style['overflowY'] = 'scroll';
-          body.style['overflowX'] = 'hidden';
+          body.style["overflowY"] = "scroll";
+          body.style["overflowX"] = "hidden";
         }
       }
       else {
         //body.style['overflow'] = this.bodyOverflowSetting.overflow;
-        body.style['overflowY'] = this.bodyOverflowSetting.overflowY;
-        body.style['overflowX'] = this.bodyOverflowSetting.overflowX;
+        body.style["overflowY"] = this.bodyOverflowSetting.overflowY;
+        body.style["overflowX"] = this.bodyOverflowSetting.overflowX;
       }
     }
   }
@@ -190,22 +192,22 @@ const PtcModal = class {
           iFrame.height = `${iFrame.contentDocument.body.scrollHeight}px`;
         }
         else {
-          iFrame.height = '616px'; //default
-          iFrame.removeAttribute('scrolling');
+          iFrame.height = "616px"; //default
+          iFrame.removeAttribute("scrolling");
         }
       }
       catch (error) {
         console.log(error);
-        iFrame.height = '616px'; //default
-        iFrame.removeAttribute('scrolling');
+        iFrame.height = "616px"; //default
+        iFrame.removeAttribute("scrolling");
       }
-      iFrame.classList.add('ready');
+      iFrame.classList.add("ready");
     }, 50);
   }
   handleScroll() {
-    let modal = this.el.shadowRoot.querySelector('.shadow-scroller');
+    let modal = this.el.shadowRoot.querySelector(".shadow-scroller");
     if (modal) {
-      let body = modal.querySelector('.modal-body');
+      let body = modal.querySelector(".modal-body");
       var height = body.clientHeight;
       var scrollHeight = body.scrollHeight;
       var scrollTop = body.scrollTop;
@@ -214,17 +216,17 @@ const PtcModal = class {
         //has scrollbar
         if (scrollTop > 0) {
           //can scroll up
-          modal.classList.add('scroll-top');
+          modal.classList.add("scroll-top");
         }
         else {
-          modal.classList.remove('scroll-top');
+          modal.classList.remove("scroll-top");
         }
         if (offset + scrollTop < scrollHeight) {
           //can scroll down
-          modal.classList.add('scroll-bottom');
+          modal.classList.add("scroll-bottom");
         }
         else {
-          modal.classList.remove('scroll-bottom');
+          modal.classList.remove("scroll-bottom");
         }
       }
     }
@@ -236,7 +238,8 @@ const PtcModal = class {
       if (this.focusBackElement) {
         (_a = this.focusBackElement) === null || _a === void 0 ? void 0 : _a.focus();
         if (this.focusBackElement.tagName === "PTC-BUTTON") {
-          (_b = this.focusBackElement.shadowRoot.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+          (_b = this.focusBackElement.shadowRoot
+            .querySelector("button")) === null || _b === void 0 ? void 0 : _b.focus();
         }
       }
     }, 100);
@@ -244,11 +247,11 @@ const PtcModal = class {
   render() {
     let content;
     let overlay;
-    let type = this.iframeUrl ? 'frame' : 'html';
-    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: e => {
+    let type = this.iframeUrl ? "frame" : "html";
+    let closebtn = (h("div", { class: "close", id: "modal-close" }, h("ptc-close-icon", { onClick: (e) => {
         e.preventDefault();
         this.close();
-      }, onKeyPress: e => {
+      }, onKeyPress: (e) => {
         e.preventDefault();
         this.close();
         this.setReturnFocus();
@@ -256,10 +259,10 @@ const PtcModal = class {
           this.trap.deactivate();
         }
       } })));
-    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: e => {
+    let bottomCloseBtnEle = (h("div", { tabindex: "0", class: "bottom-close", id: "modal-bottom-close", onClick: (e) => {
         e.preventDefault();
         this.close();
-      }, onKeyPress: e => {
+      }, onKeyPress: (e) => {
         e.preventDefault();
         this.close();
         this.setReturnFocus();
@@ -268,7 +271,7 @@ const PtcModal = class {
         }
       } }, h("span", null, this.bottomCloseBtn)));
     if (this.iframeUrl) {
-      content = h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: '100%', width: '100%', scrolling: "no", onLoad: this.resizeIframe });
+      content = (h("iframe", { src: this.iframeUrl, frameBorder: 0, allowFullScreen: false, height: "100%", width: "100%", scrolling: "no", onLoad: this.resizeIframe }));
     }
     else {
       if (this.showHeaderFooter) {
@@ -280,15 +283,19 @@ const PtcModal = class {
     }
     if (this.overlay) {
       if (this.closeOnBlur) {
-        overlay = h("div", { class: "overlay", onClick: _ => this.close() });
+        overlay = (h("div", { class: "overlay", onClick: (_) => this.close() }));
       }
       else {
         overlay = h("div", { class: "overlay" });
       }
     }
-    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? 'show' : 'hide'} ${this.fixed ? 'fixed' : ''} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ''} ${this.size} ${type} ${this.rounded ? 'rounded' : ''} ${this.showHeaderFooter ? 'shadow-scroller' : ''} `, ref: el => (this.modalPopUpRef = el) }, this.modalType === 'event-listing' && this.headerOnlyBg
+    return (h(Host, { class: this.getCssClassMap() }, this.styles && h("style", null, this.styles), h("div", { class: `wrapper ${this.show ? "show" : "hide"} ${this.fixed ? "fixed" : ""} ` }, overlay, h("div", { class: `modal-popup ${this.customClass ? this.customClass : ""} ${this.size} ${type} ${this.rounded ? "rounded" : ""} ${this.showHeaderFooter ? "shadow-scroller" : ""} `, ref: (el) => (this.modalPopUpRef = el) }, this.modalType === "event-listing" && this.headerOnlyBg
       ? [
-        h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": "smart-img", styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1 ? this.headerOnlyText1 : ''), h("span", null, this.headerOnlyText2 ? this.headerOnlyText2 : ''))),
+        h("div", { class: "event-list-header" }, h("ptc-img", { "img-url": this.headerOnlyBg, "image-type": "smart-img", styles: ".ptc-img{border-radius: var(--ptc-border-radius-standard) var(--ptc-border-radius-standard) 0px 0px;}" }), h("div", { class: "text-wrapper" }, h("span", null, this.headerOnlyText1
+          ? this.headerOnlyText1
+          : ""), h("span", null, this.headerOnlyText2
+          ? this.headerOnlyText2
+          : ""))),
       ]
       : null, this.showHeaderFooter
       ? [
@@ -296,16 +303,22 @@ const PtcModal = class {
         h("div", { class: "modal-body", onScroll: () => this.handleScroll() }, content),
         h("div", { class: "modal-footer" }, h("slot", { name: "footer" })),
       ]
-      : [closebtn, h("div", { class: "modal-body" }, content)], this.modalType === 'event-listing' && this.bottomCloseBtn ? [bottomCloseBtnEle] : null))));
+      : [
+        closebtn,
+        h("div", { class: "modal-body" }, content),
+      ], this.modalType === "event-listing" &&
+      this.bottomCloseBtn
+      ? [bottomCloseBtnEle]
+      : null))));
   }
   getCssClassMap() {
     return {
-      ['no-container']: this.hideContainer,
-      ['bio-modal']: this.isBioModal,
-      ['enclose-modal']: !this.isBioModal && this.keepInViewport,
+      ["no-container"]: this.hideContainer,
+      ["bio-modal"]: this.isBioModal,
+      ["enclose-modal"]: !this.isBioModal && this.keepInViewport,
       [this.borderRadius]: true,
       [this.modalType]: true,
-      ['vh-center']: this.vhCenter,
+      ["vh-center"]: this.vhCenter,
     };
   }
   async showModal() {
@@ -319,7 +332,7 @@ const PtcModal = class {
   }
   async reloadIframe() {
     if (this.iframeUrl) {
-      let iframe = this.el.shadowRoot.querySelector('iframe');
+      let iframe = this.el.shadowRoot.querySelector("iframe");
       if (iframe) {
         iframe.src = iframe.src;
       }

package/dist/esm/ptc-collapse-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c83db688.js';
-import { d as debounce, M as MapDOM, g as generateUUID } from './utils-2f12c081.js';
+import { d as debounce, M as MapDOM, b as generateUUID } from './utils-7c68b88a.js';
 
 const info = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
     <defs>
@@ -74,14 +74,14 @@ const PtcCollapseList = class {
     this.ready.emit({
       sender: this.el,
       tree: this.data,
-      search: this.searchText
+      search: this.searchText,
     });
     let event = () => {
       this.changed.emit({
         sender: this.el,
         selectedValue: this.selectedValue,
         selectedItems: this.selectedItems,
-        search: this.searchText
+        search: this.searchText,
       });
     };
     this.debouncedUpdatedEvent = debounce(event, this.debounceUpdateDelay, this);
@@ -89,11 +89,11 @@ const PtcCollapseList = class {
   }
   openList() {
     var _a;
-    const listitem = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.listOpen');
+    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 (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`;
         }
@@ -104,7 +104,7 @@ const PtcCollapseList = class {
     this.viewUpdated.emit({
       sender: this.el,
       tree: this.data,
-      search: this.searchText
+      search: this.searchText,
     });
   }
   onItemSelectedHandler(event) {
@@ -113,7 +113,7 @@ const PtcCollapseList = class {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data
+      tree: this.data,
     });
     this.fireChangedEvent();
   }
@@ -126,7 +126,7 @@ const PtcCollapseList = class {
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
       tree: this.data,
-      search: this.searchText
+      search: this.searchText,
     });
     this.fireChangedEvent();
   }
@@ -136,7 +136,7 @@ const PtcCollapseList = class {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data
+      tree: this.data,
     });
   }
   fireChangedEvent() {
@@ -153,7 +153,9 @@ const PtcCollapseList = class {
           arr.map((z) => {
             var newItem = new CollapseListItem();
             newItem.isExternalLink = z.linkHref ? true : false;
-            newItem.trackerId = z.trackerId ? z.trackerId : `${this.trackerId}-list-item-${counter++}`;
+            newItem.trackerId = z.trackerId
+              ? z.trackerId
+              : `${this.trackerId}-list-item-${counter++}`;
             if (z.linkHref) {
               newItem.href = z.linkHref;
               newItem.target = z.linkTarget;
@@ -167,13 +169,14 @@ const PtcCollapseList = class {
               newItem.name = z.facetName;
               newItem.value = z.facetValue;
               newItem.category = z.category;
-              newItem.allowMultiSelect = z.allowMultiSelect != 'false';
-              newItem.enableSearch = z.enableSearch == 'true';
+              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');
+              newItem.listOpened = z.hasOwnProperty("listOpened");
             }
             if (z.collapseListItem) {
               newItem.children = new Array();
@@ -190,7 +193,7 @@ const PtcCollapseList = class {
             outArr.push(newItem);
           });
         };
-        this.setUpCategory('default', true);
+        this.setUpCategory("default", true);
         buildChildren(dom.collapseListItem, this.data);
       }
     }
@@ -203,15 +206,15 @@ const PtcCollapseList = class {
       this.selectedValue[name] = {
         name: name,
         items: new Array(),
-        allowMultiSelect: allowMultiSelect
+        allowMultiSelect: allowMultiSelect,
       };
     }
   }
   collapseAllFirstLevelItems(exclude) {
-    let items = this.el.shadowRoot.querySelectorAll('.level-1');
+    let items = this.el.shadowRoot.querySelectorAll(".level-1");
     items.forEach((z) => {
-      if (z.classList.contains('expanded') && z != exclude) {
-        z.classList.remove('expanded');
+      if (z.classList.contains("expanded") && z != exclude) {
+        z.classList.remove("expanded");
       }
     });
   }
@@ -221,13 +224,13 @@ const PtcCollapseList = class {
         this.refreshBuffer = timestamp;
       }
       const elapsed = timestamp - this.refreshBuffer;
-      let items = this.el.shadowRoot.querySelectorAll('li');
+      let items = this.el.shadowRoot.querySelectorAll("li");
       items.forEach((z) => {
-        let ul = z.querySelector(':scope > ul');
+        let ul = z.querySelector(":scope > ul");
         if (ul) {
-          if (!z.classList.contains('expanded')) {
-            ul.style.removeProperty('max-height');
-            let childAnchorItems = ul.querySelectorAll('a');
+          if (!z.classList.contains("expanded")) {
+            ul.style.removeProperty("max-height");
+            let childAnchorItems = ul.querySelectorAll("a");
             if (childAnchorItems) {
               childAnchorItems.forEach((child) => {
                 if (child) {
@@ -235,7 +238,7 @@ const PtcCollapseList = class {
                 }
               });
             }
-            let childInputsItems = ul.querySelectorAll('input');
+            let childInputsItems = ul.querySelectorAll("input");
             if (childInputsItems) {
               childInputsItems.forEach((child) => {
                 if (child) {
@@ -246,19 +249,21 @@ const PtcCollapseList = class {
           }
           else {
             ul.style.maxHeight = ul.scrollHeight + "px";
-            let level1Parent = ul.closest('.level-1');
+            let level1Parent = ul.closest(".level-1");
             if (level1Parent) {
-              if (level1Parent.classList.contains('expanded')) {
+              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');
+                    if (child.children[0] &&
+                      child.children[0].tagName !=
+                        "DIV") {
+                      child.children[0].setAttribute("tabindex", "0");
                     }
                   });
                 }
               }
             }
-            let childInputsItems = ul.querySelectorAll('input');
+            let childInputsItems = ul.querySelectorAll("input");
             if (childInputsItems) {
               childInputsItems.forEach((child) => {
                 if (child) {
@@ -287,7 +292,7 @@ const PtcCollapseList = class {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : "default";
       if (!this.selectedValue[categoryName]) {
         this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
       }
@@ -297,14 +302,20 @@ const PtcCollapseList = class {
           items.push(selectedItem.value);
         }
         else {
-          this.selectedItems = this.selectedItems.filter((z) => { return z.value != items[0]; });
+          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; });
+        items = items.filter((z) => {
+          return z != selectedItem.value;
+        });
+        this.selectedItems = this.selectedItems.filter((z) => {
+          return z.value != selectedItem.value;
+        });
       }
       this.selectedValue[categoryName].items = items;
     }
@@ -313,14 +324,18 @@ const PtcCollapseList = class {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      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; });
+        items = items.filter((z) => {
+          return z != selectedItem.value;
+        });
+        this.selectedItems = this.selectedItems.filter((z) => {
+          return z.value != selectedItem.value;
+        });
       }
       this.selectedValue[categoryName].items = items;
     }
@@ -329,7 +344,7 @@ const PtcCollapseList = class {
     var _a;
     let selectedItem = this.hashMap[uuid];
     if (selectedItem && selectedItem.value) {
-      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : 'default';
+      let categoryName = (_a = selectedItem.category) !== null && _a !== void 0 ? _a : "default";
       if (!this.selectedValue[categoryName]) {
         this.setUpCategory(categoryName, selectedItem.allowMultiSelect == true);
       }
@@ -364,7 +379,9 @@ const PtcCollapseList = class {
       let input = e.target;
       let search = input.value;
       if (input) {
-        let items = input.closest('ul').querySelectorAll('li:not(.search-box-wrapper)');
+        let items = input
+          .closest("ul")
+          .querySelectorAll("li:not(.search-box-wrapper)");
         if (search && search.length > 0) {
           items.forEach((item) => {
             var _a;
@@ -397,17 +414,19 @@ const PtcCollapseList = class {
     if (event) {
       event.preventDefault();
       let sender = event.currentTarget;
-      let root = sender.closest('.level-1');
-      let parent = sender.closest('li');
+      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);
+      if (sender.classList.contains("expander-icon")) {
+        let icon = parent.classList.contains("expanded")
+          ? "minus"
+          : "plus";
+        sender.querySelector("icon-asset").setAttribute("name", icon);
       }
       this.updateExpandedItems();
     }
@@ -416,21 +435,24 @@ const PtcCollapseList = class {
   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 }))));
+        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 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
+            placeholder: z.searchBoxPlaceholder,
           };
         }
         if (level == 1) {
@@ -457,8 +479,10 @@ const PtcCollapseList = class {
         }
         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) : ''));
+            listOpen: z.listOpened,
+          } }, getLink(z, icon, level, expandable, selectable), z.children
+          ? renderLevel(z.children, level + 1, searchOptions)
+          : ""));
       })));
     };
     let getLink = (item, icon, level, expandable, selectable) => {
@@ -475,22 +499,29 @@ const PtcCollapseList = class {
       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)) {
+      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)
+          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), 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))));
+    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);