@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/ptc-checkbox-group/ptc-checkbox-group.js

@@ -1,8 +1,8 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcCheckboxGroup {
   constructor() {
     this.groupName = undefined;
-    this.type = 'card';
+    this.type = "card";
   }
   componentDidLoad() {
     this.addCheckboxChangeListeners();
@@ -10,11 +10,11 @@ export class PtcCheckboxGroup {
   addCheckboxChangeListeners() {
     const productCheckboxes = document.querySelectorAll(`input[name="${this.groupName}"]`);
     productCheckboxes.forEach((checkbox) => {
-      checkbox.addEventListener('change', () => this.handleCheckboxChange());
+      checkbox.addEventListener("change", () => this.handleCheckboxChange());
     });
     const selectAllCheckbox = document.querySelectorAll(`#select-all-${this.groupName}`);
     selectAllCheckbox.forEach((checkbox) => {
-      checkbox.addEventListener('change', () => this.selectAllProducts());
+      checkbox.addEventListener("change", () => this.selectAllProducts());
     });
   }
   handleCheckboxChange() {
@@ -33,7 +33,7 @@ export class PtcCheckboxGroup {
     selectAllCheckbox.checked = !allChecked;
   }
   render() {
-    return (h(Host, { class: `pcg-${this.type}` }, h("slot", { name: 'title' }), h("slot", null)));
+    return (h(Host, { class: `pcg-${this.type}` }, h("slot", { name: "title" }), h("slot", null)));
   }
   static get is() { return "ptc-checkbox-group"; }
   static get encapsulation() { return "scoped"; }
@@ -70,7 +70,7 @@ export class PtcCheckboxGroup {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'single' | 'card'",
+          "original": "\"single\" | \"card\"",
           "resolved": "\"card\" | \"single\"",
           "references": {}
         },
@@ -82,7 +82,7 @@ export class PtcCheckboxGroup {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'card'"
+        "defaultValue": "\"card\""
       }
     };
   }

package/dist/collection/components/ptc-close-icon/ptc-close-icon.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/ptc-close-icon/ptc-close-icon.js

@@ -1,7 +1,7 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class PtcCloseIcon {
   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" })))));
   }
   static get is() { return "ptc-close-icon"; }
   static get encapsulation() { return "shadow"; }

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

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -97,10 +101,16 @@ li {
   margin-bottom: 10px;
 }
 
-.level-2 > ul, .level-3 > ul, .level-4 > ul, .level-5 > ul {
+.level-2 > ul,
+.level-3 > ul,
+.level-4 > ul,
+.level-5 > ul {
   max-height: 0;
 }
-.level-2 > ul > li, .level-3 > ul > li, .level-4 > ul > li, .level-5 > ul > li {
+.level-2 > ul > li,
+.level-3 > ul > li,
+.level-4 > ul > li,
+.level-5 > ul > li {
   margin: var(--ptc-element-spacing-02) 0;
 }
 
@@ -175,10 +185,16 @@ li {
   padding-top: var(--ptc-element-spacing-05);
 }
 
-.level-2, .level-3, .level-4, .level-5 {
+.level-2,
+.level-3,
+.level-4,
+.level-5 {
   position: relative;
 }
-.level-2 > a, .level-3 > a, .level-4 > a, .level-5 > a {
+.level-2 > a,
+.level-3 > a,
+.level-4 > a,
+.level-5 > a {
   font-size: var(--ptc-font-size-x-small);
   font-weight: var(--ptc-font-weight-medium);
   letter-spacing: 0.4px;
@@ -188,28 +204,45 @@ li {
   margin-left: var(--ptc-element-spacing-05);
   margin-right: 6px;
 }
-.level-2 > a:hover, .level-2 > a:active, .level-3 > a:hover, .level-3 > a:active, .level-4 > a:hover, .level-4 > a:active, .level-5 > a:hover, .level-5 > a:active {
+.level-2 > a:hover, .level-2 > a:active,
+.level-3 > a:hover,
+.level-3 > a:active,
+.level-4 > a:hover,
+.level-4 > a:active,
+.level-5 > a:hover,
+.level-5 > a:active {
   font-weight: var(--ptc-font-weight-extrabold);
   color: var(--color-green-07);
   text-decoration: none;
 }
-.level-2 > a:focus-visible, .level-3 > a:focus-visible, .level-4 > a:focus-visible, .level-5 > a:focus-visible {
+.level-2 > a:focus-visible,
+.level-3 > a:focus-visible,
+.level-4 > a:focus-visible,
+.level-5 > a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.level-2 .expander-icon, .level-3 .expander-icon, .level-4 .expander-icon, .level-5 .expander-icon {
+.level-2 .expander-icon,
+.level-3 .expander-icon,
+.level-4 .expander-icon,
+.level-5 .expander-icon {
   position: absolute;
   left: -18px;
   top: 2px;
 }
-.level-2 .expander-icon:focus-visible, .level-3 .expander-icon:focus-visible, .level-4 .expander-icon:focus-visible, .level-5 .expander-icon:focus-visible {
+.level-2 .expander-icon:focus-visible,
+.level-3 .expander-icon:focus-visible,
+.level-4 .expander-icon:focus-visible,
+.level-5 .expander-icon:focus-visible {
   border-radius: 8px;
   border: 5px solid var(--keyboard-nav-outline);
   outline: none;
   top: -5px;
 }
 
-.level-3:before, .level-4:before, .level-5:before {
+.level-3:before,
+.level-4:before,
+.level-5:before {
   position: absolute;
   content: "";
   width: 2rem;

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

@@ -1,7 +1,7 @@
-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';
+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 {
@@ -29,14 +29,14 @@ export class PtcCollapseList {
     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);
@@ -44,11 +44,11 @@ export class PtcCollapseList {
   }
   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`;
         }
@@ -59,7 +59,7 @@ export class PtcCollapseList {
     this.viewUpdated.emit({
       sender: this.el,
       tree: this.data,
-      search: this.searchText
+      search: this.searchText,
     });
   }
   onItemSelectedHandler(event) {
@@ -68,7 +68,7 @@ export class PtcCollapseList {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data
+      tree: this.data,
     });
     this.fireChangedEvent();
   }
@@ -81,7 +81,7 @@ export class PtcCollapseList {
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
       tree: this.data,
-      search: this.searchText
+      search: this.searchText,
     });
     this.fireChangedEvent();
   }
@@ -91,7 +91,7 @@ export class PtcCollapseList {
       sender: event ? event.target : this.el,
       selectedValue: this.selectedValue,
       selectedItems: this.selectedItems,
-      tree: this.data
+      tree: this.data,
     });
   }
   fireChangedEvent() {
@@ -108,7 +108,9 @@ export class PtcCollapseList {
           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;
@@ -122,13 +124,14 @@ export class PtcCollapseList {
               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();
@@ -145,7 +148,7 @@ export class PtcCollapseList {
             outArr.push(newItem);
           });
         };
-        this.setUpCategory('default', true);
+        this.setUpCategory("default", true);
         buildChildren(dom.collapseListItem, this.data);
       }
     }
@@ -158,15 +161,15 @@ export class PtcCollapseList {
       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");
       }
     });
   }
@@ -176,13 +179,13 @@ export class PtcCollapseList {
         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) {
@@ -190,7 +193,7 @@ export class PtcCollapseList {
                 }
               });
             }
-            let childInputsItems = ul.querySelectorAll('input');
+            let childInputsItems = ul.querySelectorAll("input");
             if (childInputsItems) {
               childInputsItems.forEach((child) => {
                 if (child) {
@@ -201,19 +204,21 @@ export class PtcCollapseList {
           }
           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) {
@@ -242,7 +247,7 @@ export class PtcCollapseList {
     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);
       }
@@ -252,14 +257,20 @@ export class PtcCollapseList {
           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;
     }
@@ -268,14 +279,18 @@ export class PtcCollapseList {
     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;
     }
@@ -284,7 +299,7 @@ export class PtcCollapseList {
     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);
       }
@@ -319,7 +334,9 @@ export class PtcCollapseList {
       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;
@@ -352,17 +369,19 @@ export class PtcCollapseList {
     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();
     }
@@ -371,21 +390,24 @@ export class PtcCollapseList {
   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) {
@@ -412,8 +434,10 @@ export class PtcCollapseList {
         }
         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) => {
@@ -430,22 +454,29 @@ export class PtcCollapseList {
       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);

package/dist/collection/components/ptc-container/ptc-container.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */