@ptcwebops/ptcw-design 6.4.33-beta → 6.4.34-beta

package/dist/esm/ptc-product-card.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-0bf594c4.js';
+
+const ptcProductCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{outline:5px solid #003dd6 !important;outline-offset:0px !important;border-radius:var(--ptc-border-radius-standard)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.light-links a.light-link,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-grey-10 a.light-link,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-plm-grey a.light-link{color:var(--color-blue-04);margin:-2px;border:2px solid transparent}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.light-links a.light-link:visited,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-grey-10 a.light-link:visited,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-plm-grey a.light-link:visited{color:var(--color-blue-06)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.light-links a.light-link:active,.light-links a.light-link:visited:active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-grey-10 a.light-link:active,.background-grey-10 a.light-link:visited:active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-plm-grey a.light-link:active,.background-plm-grey a.light-link:visited:active{transition:none;color:var(--color-blue-07)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.light-links a.light-link:hover,.light-links a.light-link:visited:hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-grey-10 a.light-link:hover,.background-grey-10 a.light-link:visited:hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-plm-grey a.light-link:hover,.background-plm-grey a.light-link:visited:hover{color:var(--color-blue-05)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.light-links a.light-link.disabled,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-grey-10 a.light-link.disabled,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-plm-grey a.light-link.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.light-links a.light-link:focus-visible,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-grey-10 a.light-link:focus-visible,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-plm-grey a.light-link:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.light-links .podcast-cta-section a,.background-grey-10 .podcast-cta-section a,.background-plm-grey .podcast-cta-section a{border:2px solid transparent}.light-links .podcast-cta-section a:focus-visible,.background-grey-10 .podcast-cta-section a:focus-visible,.background-plm-grey .podcast-cta-section a:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.white-links a{color:var(--color-white) !important}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{color:var(--color-green-06)}.vjs-social-share-links a{color:var(--color-white)}.vjs-social-share-links a:hover{color:var(--color-white)}:host{display:block;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);margin-bottom:var(--ptc-layout-spacing-03)}:host .card-wrap{display:flex;align-items:center}:host .card-wrap ptc-picture{display:none}@media only screen and (min-width: 768px){:host .card-wrap ptc-picture{display:block;margin-left:var(--ptc-element-spacing-06);min-width:38px;max-width:38px}}:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-04)}@media only screen and (min-width: 768px){:host .card-wrap .content{padding:var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-03) 44px}}@media only screen and (min-width: 1200px){:host .card-wrap .content{display:flex;align-items:center;justify-content:space-between;width:100%}}:host .card-wrap .content .cta-wrap{margin-left:0;margin-top:24px;min-width:146px;text-align:left}@media only screen and (min-width: 1200px){:host .card-wrap .content .cta-wrap{margin-top:0px;margin-left:44px;text-align:right}}:host .toggle-btn{padding:16px;text-align:center;border-top:1px solid var(--color-gray-04);display:block;cursor:pointer}:host .toggle-btn:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .toggle-btn svg{margin-right:var(--ptc-element-spacing-03);vertical-align:middle;margin-top:-2px}:host .toggle-btn .toggleText::before{content:\"\";display:inline-block;width:18px;height:18px;background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"18\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z\" fill=\"white\"/></svg>');margin-right:12px;vertical-align:middle;margin-top:-2px}:host .product-highlights-container{padding:0px 20px 16px 20px;display:none}:host(.has-opened) .toggleText::before{background-image:url('data:image/svg+xml,<svg width=\"19\" height=\"18\" viewBox=\"0 0 19 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0.632812\" width=\"17.9798\" height=\"18\" rx=\"4\" fill=\"%2300890B\"/><g clip-path=\"url(%23clip0_220_1413)\"><path d=\"M4.86328 7.98749V10.0125H14.382V7.98749H4.86328Z\" fill=\"white\"/></g><defs><clipPath id=\"clip0_220_1413\"><rect width=\"9.51872\" height=\"9.52941\" fill=\"white\" transform=\"translate(4.86328 4.23529)\"/></clipPath></defs></svg>')}:host(.has-opened) .product-highlights-container{display:block}::slotted(.cta-group){display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;-moz-column-gap:16px;column-gap:16px}@media only screen and (min-width: 1200px){::slotted(.cta-group){flex-direction:column}}";
+
+const PtcProductCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardImage = undefined;
+    this.cardImageAltText = undefined;
+    this.cardDescription = undefined;
+    this.cardCtaText = undefined;
+    this.toggleCtaTitle = undefined;
+    this.isOpen = false;
+    this.isSlotEmpty = undefined;
+  }
+  togglePanel() {
+    this.isOpen = !this.isOpen;
+  }
+  handleReadmoreToggle(event) {
+    const siblingCards = Array.from(this.hostElement.querySelectorAll(".ptc-product-highlight-card"));
+    siblingCards.forEach((card) => {
+      var _a, _b;
+      const readmoreComponent = card === null || card === void 0 ? void 0 : card.querySelector("ptc-readmore");
+      const rmText = (_a = readmoreComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".read-more-text");
+      const isReadMore = rmText.scrollHeight > rmText.clientHeight;
+      const rmCheckbox = (_b = readmoreComponent.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#expanded");
+      if (readmoreComponent &&
+        readmoreComponent !== event.detail.sender) {
+        // Update the sibling readmore component
+        rmCheckbox.checked = event.detail.isExpanded;
+        // Trigger the update programmatically
+        const cta = readmoreComponent.shadowRoot.querySelector(".read-more-cta-label");
+        if (cta) {
+          event.detail.isExpanded
+            ? (cta.innerHTML = `<span>${readmoreComponent.lessText || ""}</span>`)
+            : (cta.innerHTML = `<span>${readmoreComponent.moreText || ""}</span>`);
+          if (event.detail.isExpanded) {
+            if (isReadMore) {
+              cta.classList.add("show-less-cta");
+            }
+          }
+          else {
+            cta.classList.remove("show-less-cta");
+          }
+        }
+        rmText.classList[isReadMore ? "add" : "remove"]("truncated");
+      }
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "card-wrap" }, this.cardImage && (h("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: "38" })), h("div", { class: "content" }, h("div", null, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h("div", null, h("slot", { name: "content" }))), h("div", { class: "cta-wrap" }, h("slot", { name: "cta" })))), this.toggleCtaTitle && (h("ptc-para", { class: "toggle-btn mf-listen", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel(), tabIndex: 0 }, h("span", { class: "toggleText" }, this.toggleCtaTitle))), h("div", { class: "product-highlights-container" }, h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PtcProductCard.style = ptcProductCardCss;
+
+export { PtcProductCard as ptc_product_card };

package/dist/esm/ptc-product-category.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+
+const ptcProductCategoryCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{outline:5px solid #003dd6 !important;outline-offset:0px !important;border-radius:var(--ptc-border-radius-standard)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.light-links a.light-link,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-grey-10 a.light-link,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-plm-grey a.light-link{color:var(--color-blue-04);margin:-2px;border:2px solid transparent}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.light-links a.light-link:visited,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-grey-10 a.light-link:visited,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-plm-grey a.light-link:visited{color:var(--color-blue-06)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.light-links a.light-link:active,.light-links a.light-link:visited:active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-grey-10 a.light-link:active,.background-grey-10 a.light-link:visited:active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-plm-grey a.light-link:active,.background-plm-grey a.light-link:visited:active{transition:none;color:var(--color-blue-07)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.light-links a.light-link:hover,.light-links a.light-link:visited:hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-grey-10 a.light-link:hover,.background-grey-10 a.light-link:visited:hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-plm-grey a.light-link:hover,.background-plm-grey a.light-link:visited:hover{color:var(--color-blue-05)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.light-links a.light-link.disabled,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-grey-10 a.light-link.disabled,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-plm-grey a.light-link.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.light-links a.light-link:focus-visible,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-grey-10 a.light-link:focus-visible,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-plm-grey a.light-link:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.light-links .podcast-cta-section a,.background-grey-10 .podcast-cta-section a,.background-plm-grey .podcast-cta-section a{border:2px solid transparent}.light-links .podcast-cta-section a:focus-visible,.background-grey-10 .podcast-cta-section a:focus-visible,.background-plm-grey .podcast-cta-section a:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.white-links a{color:var(--color-white) !important}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{color:var(--color-green-06)}.vjs-social-share-links a{color:var(--color-white)}.vjs-social-share-links a:hover{color:var(--color-white)}:host{display:block;padding-bottom:var(--ptc-layout-spacing-03)}:host .category-header{margin-bottom:var(--ptc-layout-spacing-03)}:host .tooltip-box{visibility:visible;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background-color:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:var(--ptc-border-radius-standard);width:auto;height:auto;text-align:left;text-shadow:none;white-space:normal;position:absolute;z-index:999;line-height:1.5}@media only screen and (min-width: 480px){:host .tooltip-box{width:273px}}:host .tooltip-box.hide-tooltip-mobile{display:none !important}@media only screen and (min-width: 768px){:host .tooltip-box.hide-tooltip-mobile{display:block !important}}:host .tooltip-box.full-width{width:100%}:host .tooltip-box::after{content:\"\";position:absolute}:host .tooltip-box.bottom{bottom:-12px;transform:translateY(100%)}:host .tooltip-box.bottom::after{top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}:host .tooltip-box.left{bottom:-12px;transform:translate(-80%, 100%)}:host .tooltip-box.left::after{top:1px;right:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}:host .tooltip-box.right{bottom:-12px;transform:translateY(100%);right:0px}@-moz-document url-prefix(){:host .tooltip-box.right{right:unset !important;bottom:unset !important;transform:translate(60%, 8px) !important}@media screen and (min-width: 992px){:host .tooltip-box.right{transform:translate(100%, 8px) !important}}}:host .tooltip-box.right::after{top:1px;left:8px;transform:translateY(-100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}:host .tooltip-box.top{top:-8px;transform:translateY(-100%)}:host .tooltip-box.top::after{left:50%;bottom:1px;transform:translate(-50%, 100%);border:8px solid transparent;border-top:8px solid var(--color-gray-09)}:host .tooltip-box.bottom-right{bottom:-12px;transform:translate(100%, 100%)}:host .tooltip-box.bottom-right::after{top:1px;left:10%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}:host .tooltip-box.danger{color:var(--color-red-07);font-family:var(--ptc-font-latin);font-weight:var(--ptc-font-weight-semibold);font-size:var(--ptc-font-size-xx-small);line-height:var(--ptc-line-height-p);border:2px solid var(--color-red-07);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);padding:var(--ptc-element-spacing-06)}:host .tooltip-box.danger a{color:var(--color-hyperlink)}@media (max-width: 768px){:host .hide-tooltip-on-mobile h1,:host .hide-tooltip-on-mobile h2,:host .hide-tooltip-on-mobile h3,:host .hide-tooltip-on-mobile h4,:host .hide-tooltip-on-mobile h5,:host .hide-tooltip-on-mobile h6{-webkit-line-clamp:initial !important}}";
+
+const PtcProductCategory = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.categoryDescription = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "category-header" }, h("slot", { name: "title" }), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto", "enable-tooltip": true, "max-lines": "9", "tooltip-z-index": "999", "tooltip-width": "full-width", "seo-compatibility-mode": true }, this.categoryDescription)), h("slot", null)));
+  }
+};
+PtcProductCategory.style = ptcProductCategoryCss;
+
+export { PtcProductCategory as ptc_product_category };

package/dist/esm/ptc-product-dropdown.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
+
+const ptcProductDropdownCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;margin-top:4px;background-color:var(--color-white)}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;width:100%;font-size:16px}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:34px;box-sizing:border-box}:host .dropdown .dropdown-toggle:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .dropdown .dropdown-toggle .dropdown-placeholder{font-size:14px;color:var(--color-gray-07)}:host .caret{display:inline-block;vertical-align:middle}:host .dropdown-menu{position:absolute;top:100%;left:0;min-width:10rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);z-index:105;max-height:400px;overflow-y:auto;width:100%;box-sizing:border-box}:host .dropdown-menu::-webkit-scrollbar{width:5px}:host .dropdown-menu::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .checkbox-label{display:flex;align-items:flex-start;padding:6px 16px;cursor:pointer;font-size:14px}:host .checkbox-label:first-child{padding-top:20px}:host .checkbox-label:last-child{padding-bottom:20px}:host .checkbox-label input[type=checkbox]{min-width:20px;margin-right:8px;width:20px;height:20px;margin-top:0}:host .checkbox-label input[type=checkbox]:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}";
+
+const PtcProductDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedValues = createEvent(this, "selectedValues", 7);
+    this.dropdownTouched = createEvent(this, "dropdownTouched", 7);
+    this.internalOptions = undefined;
+    this.newOptions = undefined;
+    this.selectedOptions = [];
+    this.placeholder = undefined;
+    this.isOpen = false;
+  }
+  parseOptions() {
+    let options = Array.from(this.hostElement.querySelectorAll("span"));
+    if (options) {
+      this.internalOptions = options.map((option) => {
+        return option.textContent;
+      });
+    }
+  }
+  toggleDropdown() {
+    this.isOpen = !this.isOpen;
+    this.dropdownTouched.emit({
+      sender: this,
+      isOpen: this.isOpen,
+    });
+  }
+  handleSearchResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      if (searchTerm === "") {
+        this.selectedOptions = [];
+        this.isOpen = false;
+      }
+    }
+  }
+  handleinputChanged(event) {
+    const { sender } = event.detail;
+    if (sender) {
+      this.selectedOptions = [];
+      this.isOpen = false;
+    }
+  }
+  handleCheckboxChange(option) {
+    const index = this.selectedOptions.indexOf(option);
+    if (index > -1) {
+      this.selectedOptions.splice(index, 1);
+      this.selectedValues.emit({
+        sender: this,
+        selectedOptions: this.selectedOptions,
+      });
+    }
+    else {
+      this.selectedOptions.push(option);
+      this.selectedValues.emit({
+        sender: this,
+        selectedOptions: this.selectedOptions,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.parseOptions();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown(), onKeyDown: (e) => {
+        e.key === "Enter" ? this.toggleDropdown() : null;
+      }, tabIndex: 0 }, h("span", { class: "dropdown-placeholder" }, this.placeholder), h("span", { class: "caret" }, h("svg", { width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.86537 0.917969L6.14614 4.56922L10.4269 0.917969L11.9769 2.23997L6.14614 7.21323L0.31543 2.23997L1.86537 0.917969Z", fill: "#323B42" })))), this.isOpen && (h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), h("div", { class: "hidden" }, h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PtcProductDropdown.style = ptcProductDropdownCss;
+
+export { PtcProductDropdown as ptc_product_dropdown };

package/dist/esm/ptc-product-highlight-card.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-0bf594c4.js';
+
+const ptcProductHighlightCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}a{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);text-decoration-line:underline;color:var(--color-hyperlink);transition:color var(--ptc-transition-medium) var(--ptc-ease-out);font-weight:var(--ptc-font-weight-bold)}a:visited{color:var(--color-blue-10)}a:active,a:visited:active{transition:none;color:var(--color-blue-09)}a:hover,a:visited:hover{color:var(--color-blue-08)}a.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}a:focus-visible{outline:5px solid #003dd6 !important;outline-offset:0px !important;border-radius:var(--ptc-border-radius-standard)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.light-links a.light-link,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-grey-10 a.light-link,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a),.background-plm-grey a.light-link{color:var(--color-blue-04);margin:-2px;border:2px solid transparent}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.light-links a.light-link:visited,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-grey-10 a.light-link:visited,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited,.background-plm-grey a.light-link:visited{color:var(--color-blue-06)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.light-links a.light-link:active,.light-links a.light-link:visited:active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-grey-10 a.light-link:active,.background-grey-10 a.light-link:visited:active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):active,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:active,.background-plm-grey a.light-link:active,.background-plm-grey a.light-link:visited:active{transition:none;color:var(--color-blue-07)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.light-links a.light-link:hover,.light-links a.light-link:visited:hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-grey-10 a.light-link:hover,.background-grey-10 a.light-link:visited:hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):hover,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):visited:hover,.background-plm-grey a.light-link:hover,.background-plm-grey a.light-link:visited:hover{color:var(--color-blue-05)}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.light-links a.light-link.disabled,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-grey-10 a.light-link.disabled,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a).disabled,.background-plm-grey a.light-link.disabled{color:var(--color-gray-04) !important;cursor:not-allowed}.light-links a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.light-links a.light-link:focus-visible,.background-grey-10 a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-grey-10 a.light-link:focus-visible,.background-plm-grey a:not(.hero-footer-form-wrapper a,ptc-modal inline-form a,.podcast-cta-section a,.vjs-social-share-links a):focus-visible,.background-plm-grey a.light-link:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.light-links .podcast-cta-section a,.background-grey-10 .podcast-cta-section a,.background-plm-grey .podcast-cta-section a{border:2px solid transparent}.light-links .podcast-cta-section a:focus-visible,.background-grey-10 .podcast-cta-section a:focus-visible,.background-plm-grey .podcast-cta-section a:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid white;outline:5px solid var(--keyboard-nav-outline)}.white-links a{color:var(--color-white) !important}.ptc-link{color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link:hover{color:var(--color-green-06)}.ptc-link:visited{color:var(--color-gray-10)}.ptc-link:active,.ptc-link:visited:active{transition:none;color:var(--color-green-06)}.ptc-link:hover,.ptc-link:visited:hover{color:var(--color-green-06)}.ptc-link-dark{color:var(--color-white);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--color-green-06);text-underline-offset:5px;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}.ptc-link-dark:hover{color:var(--color-green-06)}.ptc-link-dark:visited{color:var(--color-white)}.ptc-link-dark:active,.ptc-link-dark:visited:active{transition:none;color:var(--color-green-06)}.ptc-link-dark:hover,.ptc-link-dark:visited:hover{color:var(--color-green-06)}.vjs-social-share-links a{color:var(--color-white)}.vjs-social-share-links a:hover{color:var(--color-white)}:host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto;height:100%}:host ptc-picture{min-height:100px}:host ptc-para ptc-readmore .box input~label{margin-right:0px}:host ptc-para a{color:var(--color-hyperlink)}";
+
+const PtcProductHighlightCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+    this.cardImageAltText = undefined;
+    this.moreText = "More";
+    this.lessText = "Less";
+    this.cardDescription = undefined;
+    this.browserFirefox = false;
+    this.currentLanguage = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ptc-title", { type: "h4", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": "center" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: "full-width" })), h("ptc-picture", { alt: this.cardImageAltText, src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": "left", "para-z-index": "z-auto" }, this.browserFirefox &&
+      this.currentLanguage.toLowerCase().includes("ja") ? (h("slot", null)) : (h("ptc-readmore", { "more-text": this.moreText, "less-text": this.lessText, "visible-lines-custom": "8", "read-more-position": "left" }, h("slot", null))))));
+  }
+};
+PtcProductHighlightCard.style = ptcProductHighlightCardCss;
+
+export { PtcProductHighlightCard as ptc_product_highlight_card };

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

@@ -0,0 +1,168 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
+
+const ptcProductListCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;padding-bottom:52px}@media only screen and (min-width: 992px){:host{padding-bottom:102px}}:host .no-result-wrap{display:none}:host .no-result-wrap.show{display:block}:host .no-result-wrap .no-result{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;text-align:center}";
+
+const PtcProductList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.clearCtaClicked = createEvent(this, "clearCtaClicked", 7);
+    this.emptyTitle = undefined;
+    this.emptySubTitle = undefined;
+    this.clearButtonLabel = undefined;
+  }
+  handleSearchResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      this.sortCards(searchTerm);
+    }
+  }
+  handleMultipleSearchResult(event) {
+    const { sender, selectedOptions } = event.detail;
+    if (sender) {
+      this.sortMultipleCards(selectedOptions);
+    }
+  }
+  handleEmptyResult(event) {
+    const { sender, searchTerm } = event.detail;
+    if (sender) {
+      this.noresultSection.classList.add("show");
+      this.sortCards(searchTerm);
+    }
+  }
+  sortMultipleCards(searchItems) {
+    const categoryList = Array.from(this.hostElement.querySelectorAll("ptc-product-category"));
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute("category-title");
+      const productList = Array.from(category.querySelectorAll("ptc-product-card"));
+      if (searchItems.length > 0) {
+        const shouldDisplayCategory = searchItems.some((searchItem) => categoryTitle && categoryTitle.includes(searchItem));
+        category.style.display = shouldDisplayCategory
+          ? "block"
+          : "none";
+        if (shouldDisplayCategory) {
+          productList.forEach((product) => {
+            product.style.display = "block";
+          });
+        }
+        else {
+          productList.forEach((product) => {
+            const productTitle = product.getAttribute("card-title");
+            const shouldDisplayProduct = searchItems.some((searchItem) => productTitle &&
+              productTitle.includes(searchItem));
+            product.style.display = shouldDisplayProduct
+              ? "block"
+              : "none";
+          });
+        }
+      }
+      else {
+        category.style.display = "block";
+        productList.forEach((product) => {
+          product.style.display = "block";
+        });
+      }
+    });
+  }
+  // Sorting the
+  sortCards(searchItem) {
+    const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute("category-title");
+      const productList = category.querySelectorAll("ptc-product-card");
+      category.style.display = "none";
+      if (searchItem === "") {
+        category.style.display = "block";
+        productList.forEach((product) => {
+          product.style.display = "block";
+        });
+        this.noresultSection.classList.remove("show");
+      }
+      else {
+        const searchItemLowerCase = searchItem; //
+        if (searchItemLowerCase === categoryTitle) {
+          category.style.display = "block";
+          productList.forEach((product) => {
+            product.style.display = "block";
+          });
+        }
+        else {
+          productList.forEach((product) => {
+            const productTitle = product.getAttribute("card-title");
+            product.style.display = "none";
+            if (searchItemLowerCase === productTitle) {
+              product.style.display = "block";
+              category.style.display = "block";
+            }
+          });
+        }
+      }
+    });
+  }
+  componentDidLoad() {
+    // ptcLogger.log('Component loaded!');
+    // ptcLogger.info('Component loaded!');
+    // ptcLogger.warn('Component loaded!');
+    // ptcLogger.error('Component loaded!');
+    this.addIds();
+    this.noresultSection = this.hostElement.shadowRoot.querySelector(".no-result-wrap");
+    this.productList = this.hostElement.shadowRoot.querySelector(".product-list");
+    const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
+    productCards.forEach((card) => {
+      const toggleBtn = card.shadowRoot.querySelector(".toggle-btn");
+      if (toggleBtn) {
+        const handleToggle = () => {
+          if (card.classList.contains("has-opened")) {
+            card.classList.remove("has-opened");
+          }
+          else {
+            card.classList.add("has-opened");
+          }
+          this.hideAllCards(card);
+        };
+        toggleBtn.addEventListener("click", handleToggle);
+        toggleBtn.addEventListener("keydown", (event) => {
+          if (event.key === "Enter") {
+            handleToggle();
+          }
+        });
+      }
+    });
+  }
+  hideAllCards(selectedCard) {
+    const productCards = this.hostElement.querySelectorAll("ptc-product-category ptc-product-card");
+    productCards.forEach((card) => {
+      if (selectedCard != card) {
+        card.classList.remove("has-opened");
+      }
+    });
+  }
+  handleClick(event) {
+    this.clearCtaClicked.emit({
+      sender: this,
+      event: event,
+    });
+  }
+  // Adding id to the category and product cards
+  addIds() {
+    const categoryList = this.hostElement.querySelectorAll("ptc-product-category");
+    categoryList.forEach((category) => {
+      const categoryTitle = category.getAttribute("category-title");
+      category.setAttribute("id", categoryTitle);
+      const productList = category.querySelectorAll("ptc-product-card");
+      productList.forEach((product) => {
+        const productTitle = product.getAttribute("card-title");
+        product.setAttribute("id", productTitle);
+      });
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "product-list" }, h("slot", null)), h("div", { class: "no-result-wrap" }, h("div", { class: "no-result" }, h("div", null, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "large" }, this.emptyTitle || "No Results Found"), h("ptc-para", { "font-size": "x-small" }, this.emptySubTitle ||
+      "Try changing or removing some of your filters"), h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => {
+        this.handleClick(e);
+      } }, this.clearButtonLabel || "Clear Filters"))))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PtcProductList.style = ptcProductListCss;
+
+export { PtcProductList as ptc_product_list };

package/dist/esm/ptc-product-sidebar.entry.js

@@ -0,0 +1,174 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bf594c4.js';
+
+const ptcProductSidebarCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 768px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-xx-small);font-weight:600}@media only screen and (min-width: 992px){:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small)}}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 768px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .input-wrap input:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";
+
+const PtcProductSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedResult = createEvent(this, "selectedResult", 7);
+    this.clearsearch = createEvent(this, "clearsearch", 7);
+    this.inputChanged = createEvent(this, "inputChanged", 7);
+    this.emptyResult = createEvent(this, "emptyResult", 7);
+    this.searchTerm = "";
+    this.suggestions = [];
+    this.filterResults = "Filter Results";
+    this.filterText = "Filter";
+    this.clearText = "Clear";
+    this.technologyText = "Technology";
+    this.jumpToProduct = "Jump to Product";
+    this.selectTechnology = "Select a technology";
+    this.suggestionList = [];
+  }
+  componentWillLoad() {
+    this.getDomData();
+  }
+  componentDidLoad() {
+    this.productListWrap = this.hostElement.shadowRoot.querySelector(".product-list-wrap");
+    this.clearBtn = this.hostElement.shadowRoot.querySelector(".clear-cta");
+    this.inputBox = this.hostElement.shadowRoot.querySelector("#searchBox");
+  }
+  // Getting category title and products list
+  getDomData() {
+    const categoryList = document.querySelectorAll("ptc-product-category");
+    categoryList.forEach((category) => {
+      let categoryTitle = category.getAttribute("category-title");
+      let categoryObject = { categoryName: categoryTitle, products: [] };
+      this.suggestionList.push(categoryObject);
+      let productList = category.querySelectorAll("ptc-product-card");
+      productList.forEach((product) => {
+        let productTitle = product.getAttribute("card-title");
+        categoryObject.products.push(productTitle);
+      });
+    });
+  }
+  handleInputChange(event) {
+    const inputElement = event.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    this.clearBtn.classList.add("show");
+    this.getSuggestions();
+    this.inputChanged.emit({
+      sender: this,
+      event: event,
+    });
+  }
+  getSuggestions() {
+    const searchTerm = this.searchTerm.toLowerCase();
+    const suggestions = this.suggestionList.reduce((acc, item) => {
+      if (item.categoryName.toLowerCase().includes(searchTerm)) {
+        acc.push(item.categoryName); // Include the category if it matches the search term
+      }
+      const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
+      if (matchedProducts.length > 0) {
+        acc.push(...matchedProducts); // Include the matching products
+      }
+      return acc;
+    }, []);
+    this.suggestions = suggestions;
+  }
+  handleSelectSuggestion(suggestion, event) {
+    this.searchTerm = suggestion;
+    this.productListWrap.classList.add("hide");
+    this.selectedResult.emit({
+      sender: this,
+      event: event,
+      searchTerm: this.searchTerm,
+    });
+  }
+  handleKeyUp(e) {
+    const inputElement = e.target;
+    this.searchTerm = inputElement.value.toLocaleLowerCase();
+    if (e.keyCode === 13 && this.suggestions.length == 0) {
+      this.emptyResult.emit({
+        sender: this,
+        event: e,
+      });
+    }
+    else if (e.key === "Escape") {
+      this.clearSearch(e);
+      this.inputBox.focus();
+    }
+  }
+  handleKeyDownClearCta(e) {
+    if (e.key === "Enter") {
+      this.clearSearch(e);
+    }
+  }
+  clearSearch(event) {
+    let input = this.hostElement.shadowRoot.querySelector("input");
+    this.productListWrap.classList.remove("hide");
+    this.clearBtn.classList.remove("show");
+    if (input) {
+      input.value = "";
+    }
+    this.suggestions = [];
+    this.clearsearch.emit({
+      sender: this,
+      event: event,
+      searchTerm: input.value,
+    });
+  }
+  handleDropdownTouched(event) {
+    const { sender, isOpen } = event.detail;
+    if (sender) {
+      if (isOpen) {
+        let input = this.hostElement.shadowRoot.querySelector("input");
+        if (input) {
+          input.value = "";
+        }
+      }
+    }
+  }
+  handleClick() {
+    this.suggestions = [];
+  }
+  handleclearCtaClicked(eve) {
+    const { sender, event } = eve.detail;
+    if (sender) {
+      this.clearSearch(event);
+    }
+  }
+  handleSelectedValues(event) {
+    const { sender, selectedOptions } = event.detail;
+    if (sender) {
+      if (selectedOptions.length > 0) {
+        this.clearBtn.classList.add("show");
+        this.productListWrap.classList.add("hide");
+      }
+      else {
+        this.clearBtn.classList.remove("show");
+        this.productListWrap.classList.remove("hide");
+      }
+    }
+  }
+  handleSuggestionKeyDown(e, index, suggestion) {
+    var _a;
+    const listItems = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll("li");
+    if (!listItems)
+      return;
+    if (e.key === "Enter") {
+      this.handleSelectSuggestion(suggestion, e);
+      this.suggestions = [];
+    }
+    else if (e.key === "Tab") {
+      e.preventDefault();
+      const isShift = e.shiftKey;
+      const nextIndex = isShift
+        ? (index - 1 + listItems.length) % listItems.length
+        : (index + 1) % listItems.length;
+      listItems[nextIndex].focus();
+    }
+    else if (e.key === "Escape") {
+      this.clearSearch(e);
+      this.inputBox.focus();
+    }
+  }
+  render() {
+    return (h(Host, { class: "search-box" }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.filterResults), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e), tabIndex: 0, onKeyDown: (e) => {
+        this.handleKeyDownClearCta(e);
+      } }, this.clearText)), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, this.filterText), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: "searchBox" })), this.suggestions.length > 0 && (h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion, index) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e), tabIndex: 0, onKeyDown: (e) => this.handleSuggestionKeyDown(e, index, suggestion) }, suggestion))))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, this.technologyText), h("ptc-product-dropdown", { placeholder: this.selectTechnology, id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium", "title-height": "densest" }, this.jumpToProduct), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-7", "para-line-h": "line-height-densest", "para-margin": "margin-flush" }, h("list-item", { "list-type": "list-underline", "link-href": "#" + item.categoryName }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-2", description: item.categoryName, position: "bottom" }))), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": "#" + product }, product)))))))))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PtcProductSidebar.style = ptcProductSidebarCss;
+
+export { PtcProductSidebar as ptc_product_sidebar };