@ptcwebops/ptcw-design 4.5.6 → 4.5.9

package/dist/collection/components/ptc-quantity-counter/ptc-quantity-counter.js

@@ -0,0 +1,128 @@
+import { Host, h } from '@stencil/core';
+export class PtcQuantityCounter {
+  constructor() {
+    this.handleDecrement = () => {
+      if (this.count > 1) {
+        this.count -= 1;
+      }
+    };
+    this.handleIncrement = () => {
+      if (this.count < 999) {
+        this.count += 1;
+      }
+    };
+    this.handleInputChange = (event) => {
+      const input = event.target;
+      const value = parseInt(input.value);
+      if (!isNaN(value) && value > 0) {
+        this.count = value;
+      }
+    };
+    this.selectText = () => {
+      if (this.itemCountInput) {
+        this.itemCountInput.focus();
+        this.itemCountInput.select();
+      }
+    };
+    this.addToCart = () => {
+      var _a;
+      this.addToCartClicked.emit({
+        sender: this,
+        itemCount: (_a = this.itemCountInput) === null || _a === void 0 ? void 0 : _a.value
+      });
+      if (this.addToCartCta) {
+        this.addToCartCta.classList.add('added');
+        this.addToCartCta.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none">
+  <path d="M1.71436 4.92857L6.28578 9.5L14.2858 1.5" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>${this.addedLabel}`;
+      }
+      setTimeout(() => {
+        if (this.addToCartCta) {
+          this.addToCartCta.classList.remove('added');
+          this.addToCartCta.innerHTML = this.addToCartLabel;
+        }
+      }, 3000);
+    };
+    this.count = 1;
+    this.addToCartLabel = 'Add to Cart';
+    this.addedLabel = 'Added';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "quantity-counter" }, h("button", { class: "decrement", onClick: this.handleDecrement }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), h("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el) }), h("button", { class: "increment", onClick: this.handleIncrement }, h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("g", { "clip-path": "url(#clip0_2974_659)" }, h("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), h("defs", null, h("clipPath", { id: "clip0_2974_659" }, h("rect", { width: "8", height: "8", fill: "white" }))))))), h("ptc-button", { type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: ".ptc-quaternary{width: 100%; border-radius: 0px 0px 4px 4px ;}" }, this.addToCartLabel)));
+  }
+  static get is() { return "ptc-quantity-counter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-quantity-counter.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-quantity-counter.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "addToCartLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-to-cart-label",
+        "reflect": false,
+        "defaultValue": "'Add to Cart'"
+      },
+      "addedLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "added-label",
+        "reflect": false,
+        "defaultValue": "'Added'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "count": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "addToCartClicked",
+        "name": "addToCartClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ sender: any; itemCount: any }",
+          "resolved": "{ sender: any; itemCount: any; }",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/ptc-readmore/ptc-readmore.js

@@ -52,6 +52,7 @@ export class PtcReadmore {
     });
     this.enableAddTruncatedClass('tab-header');
     this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
+    this.enableAddTruncatedClass('ptc-product-highlight-card');
   }
   // click event handler
   handleClick(event) {

package/dist/custom-elements/index.d.ts

@@ -650,6 +650,12 @@ export const PtcProgressBar: {
   new (): PtcProgressBar;
 };
 
+interface PtcQuantityCounter extends Components.PtcQuantityCounter, HTMLElement {}
+export const PtcQuantityCounter: {
+  prototype: PtcQuantityCounter;
+  new (): PtcQuantityCounter;
+};
+
 interface PtcQuote extends Components.PtcQuote, HTMLElement {}
 export const PtcQuote: {
   prototype: PtcQuote;

package/dist/custom-elements/index.js

@@ -8224,6 +8224,8 @@ const PtcCaseStudiesSlider$1 = class extends HTMLElement$1 {
     this.slideChangeHandler();
     this.renderSlides('swiper-slide-thumb', 'swiper-wrapper-thumbs');
     this.renderSlides('swiper-slide-content', 'swiper-wrapper-content');
+    //Added for preloader skeleton issue
+    setTimeout(() => { this.initSlider(); }, 3100);
   }
   initSlider() {
     this.caseStudiesThumbs = new Swiper(this.caeStudiesThumbRef, {
@@ -16392,6 +16394,7 @@ const PtcFilterDropdown$1 = class extends HTMLElement$1 {
     this.selectedOptions = [];
     this.placeholder = undefined;
     this.selectedTag = undefined;
+    this.styles = undefined;
     this.isOpen = false;
   }
   async clearFilterSelection() {
@@ -16455,7 +16458,7 @@ const PtcFilterDropdown$1 = class extends HTMLElement$1 {
     this.parseOptions();
   }
   render() {
-    return (h$1(Host, null, h$1("div", { class: "dropdown" }, h$1("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h$1("span", { class: "dropdown-placeholder" }, h$1("strong", null, "Filter: "), h$1("span", { class: "dropdown-filter-name" }, this.placeholder)), h$1("span", { class: "caret" }, h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h$1("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h$1("div", { class: "dropdown-menu" }, h$1("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h$1("li", { key: option.tabId }, h$1("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h$1("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h$1("div", { class: "filter-btns" }, h$1("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions('applyButton'), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h$1("div", { class: "hidden" }, h$1("slot", null))));
+    return (h$1(Host, null, this.styles && h$1("style", null, this.styles), h$1("div", { class: "dropdown" }, h$1("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h$1("span", { class: "dropdown-placeholder" }, h$1("strong", null, "Filter: "), h$1("span", { class: "dropdown-filter-name" }, this.placeholder)), h$1("span", { class: "caret" }, h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none" }, h$1("path", { d: "M10.2426 1.24264L6 5.48528L1.75736 1.24264", stroke: "#20262A", "stroke-width": "2", "stroke-linecap": "round" })))), this.isOpen && (h$1("div", { class: "dropdown-menu" }, h$1("ul", { class: "filter-list" }, this.internalOptions.map((option) => (h$1("li", { key: option.tabId }, h$1("label", { class: "radio-label", htmlFor: option.value.replace(/\s+/g, '') }, h$1("input", { type: "radio", id: option.value.replace(/\s+/g, ''), name: "theater-filter", value: option.value, checked: this.selectedOptions.some((item) => item.value === option.value), "tab-id": option.tabId, "tag-name": option.tagName }), option.value))))), h$1("div", { class: "filter-btns" }, h$1("span", { class: "clear-btn", onClick: () => this.clearFilter() }, "Clear"), h$1("ptc-button", { type: "link", color: "ptc-secondary", onClick: () => this.emitSelectedOptions('applyButton'), styles: ' a span { font-size: 16px !important;  } a{ padding: 10px 16px !important; }' }, "Apply"))))), h$1("div", { class: "hidden" }, h$1("slot", null))));
   }
   get hostElement() { return this; }
   static get style() { return ptcFilterDropdownCss; }
@@ -21269,6 +21272,8 @@ const PtcPricingPackagingTable$1 = class extends HTMLElement$1 {
       that.setHashKey(true);
       this.debouncedHashEnable();
     });
+    //Added for preloader skeleton issue
+    setTimeout(() => { this.handleTableReset(); }, 3100);
   }
   render() {
     const TableTitle = () => {
@@ -21484,7 +21489,7 @@ const PtcProductCard$1 = class extends HTMLElement$1 {
   }
   render() {
     return (h$1(Host, null, h$1("div", { class: "card-wrap" }, this.cardImage &&
-      h$1("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h$1("div", { class: "content" }, h$1("div", null, h$1("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block", "title-height": "densest" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-spacer", { size: "x-small" }), h$1("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "16", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))), h$1("div", { class: 'cta-wrap' }, h$1("slot", { name: "cta" })))), this.toggleCtaTitle &&
+      h$1("ptc-picture", { alt: "image-test", src: this.cardImage, "display-image": "inline-block", width: '38' }), h$1("div", { class: "content" }, h$1("div", null, h$1("ptc-title", { type: 'h3', upperline: "no-upperline", "title-size": "medium", "title-weight": "w-8", "title-margin": 'margin-flush', "title-display": "block", "title-height": "densest" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("ptc-spacer", { size: "x-small" }), h$1("ptc-spacer", { size: "xx-small", breakpoint: "x-small" }), h$1("div", null, h$1("slot", { name: "content" }))), h$1("div", { class: 'cta-wrap' }, h$1("slot", { name: "cta" })))), this.toggleCtaTitle &&
       h$1("ptc-para", { class: "toggle-btn", "font-size": "small", "para-margin": "margin-flush", "para-line-h": "line-height-p", "para-z-index": "z-auto", onClick: () => this.togglePanel() }, h$1("span", { class: 'toggleText' }, this.toggleCtaTitle)), h$1("div", { class: 'product-highlights-container' }, h$1("slot", null))));
   }
   get hostElement() { return this; }
@@ -21592,10 +21597,12 @@ const PtcProductHighlightCard$1 = class extends HTMLElement$1 {
     this.cardTitle = undefined;
     this.cardImage = undefined;
     this.cardImageAltText = undefined;
+    this.moreText = 'More';
+    this.lessText = 'Less';
     this.cardDescription = undefined;
   }
   render() {
-    return (h$1(Host, null, h$1("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("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$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "5", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
+    return (h$1(Host, null, h$1("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h$1("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h$1("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$1("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h$1("ptc-readmore", { "more-text": this.moreText, "less-text": this.lessText, "visible-lines-custom": "8" }, h$1("slot", null)))));
   }
   static get style() { return ptcProductHighlightCardCss; }
 };
@@ -21911,6 +21918,66 @@ const PtcProgressBar$1 = class extends HTMLElement$1 {
   static get style() { return ptcProgressBarCss; }
 };
 
+const ptcQuantityCounterCss = "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:inline-block}:host .ptc-quaternary{width:100%}:host .quant-wrap{display:flex;flex-direction:column;width:100%}:host .quantity-counter{display:flex;align-items:flex-end;width:100%;box-sizing:border-box;justify-content:space-between}:host .quantity-counter button{width:44px;height:44px;border:none;display:flex;align-items:flex-end;justify-content:center;background-color:transparent;cursor:pointer;font-size:var(--ptc-font-size-x-small);user-select:none;padding:0}:host .quantity-counter button span{border:1px solid var(--color-gray-03);border-bottom:none;display:block;width:44px;height:32px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:4px 0 0px 0px}:host .quantity-counter button.increment span{border-radius:0px 4px 0px 0px}:host .quantity-counter button:hover span{background-color:var(--color-gray-02)}:host .quantity-counter button:active span{background-color:var(--color-gray-03)}:host .quantity-counter input{width:100%;height:32px;text-align:center;border:1px solid var(--color-gray-03);border-left:none;border-right:none;border-bottom:none;font-size:16px;text-align:center;font-weight:700;box-sizing:border-box;-moz-appearance:textfield}:host .quantity-counter input::-webkit-outer-spin-button,:host .quantity-counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ptc-button svg{margin-right:8px}:host ptc-button.added{pointer-events:none}";
+
+const PtcQuantityCounter$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.addToCartClicked = createEvent(this, "addToCartClicked", 7);
+    this.handleDecrement = () => {
+      if (this.count > 1) {
+        this.count -= 1;
+      }
+    };
+    this.handleIncrement = () => {
+      if (this.count < 999) {
+        this.count += 1;
+      }
+    };
+    this.handleInputChange = (event) => {
+      const input = event.target;
+      const value = parseInt(input.value);
+      if (!isNaN(value) && value > 0) {
+        this.count = value;
+      }
+    };
+    this.selectText = () => {
+      if (this.itemCountInput) {
+        this.itemCountInput.focus();
+        this.itemCountInput.select();
+      }
+    };
+    this.addToCart = () => {
+      var _a;
+      this.addToCartClicked.emit({
+        sender: this,
+        itemCount: (_a = this.itemCountInput) === null || _a === void 0 ? void 0 : _a.value
+      });
+      if (this.addToCartCta) {
+        this.addToCartCta.classList.add('added');
+        this.addToCartCta.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none">
+  <path d="M1.71436 4.92857L6.28578 9.5L14.2858 1.5" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>${this.addedLabel}`;
+      }
+      setTimeout(() => {
+        if (this.addToCartCta) {
+          this.addToCartCta.classList.remove('added');
+          this.addToCartCta.innerHTML = this.addToCartLabel;
+        }
+      }, 3000);
+    };
+    this.count = 1;
+    this.addToCartLabel = 'Add to Cart';
+    this.addedLabel = 'Added';
+  }
+  render() {
+    return (h$1(Host, null, h$1("div", { class: "quantity-counter" }, h$1("button", { class: "decrement", onClick: this.handleDecrement }, h$1("span", null, h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h$1("path", { d: "M0 3.15039V4.85039H8V3.15039H0Z", fill: "#20262A" })))), h$1("input", { type: "number", onInput: this.handleInputChange, onClick: this.selectText, min: "1", max: "999", value: this.count, ref: el => (this.itemCountInput = el) }), h$1("button", { class: "increment", onClick: this.handleIncrement }, h$1("span", null, h$1("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h$1("g", { "clip-path": "url(#clip0_2974_659)" }, h$1("path", { d: "M7.95006 3.14981H4.85005V0.0498047H3.15005V3.14981H0.0500488V4.84981H3.15005V7.9498H4.85005V4.84981H7.95006V3.14981Z", fill: "#20262A" })), h$1("defs", null, h$1("clipPath", { id: "clip0_2974_659" }, h$1("rect", { width: "8", height: "8", fill: "white" }))))))), h$1("ptc-button", { type: "button", color: "ptc-quaternary", onClick: this.addToCart, ref: el => (this.addToCartCta = el), styles: ".ptc-quaternary{width: 100%; border-radius: 0px 0px 4px 4px ;}" }, this.addToCartLabel)));
+  }
+  static get style() { return ptcQuantityCounterCss; }
+};
+
 const QuotationMark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.12 32.76"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:#cac8c8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-1"><g class="cls-1"><path class="cls-2" d="M24,0,18,15.12h5.4L19.68,32.76H0l3.72-18L11.4,0ZM48.12,0l-6,15.12h5.4L43.8,32.76H24.12l3.72-18L35.52,0Z"/></g></g></g></g></svg>`;
 
 const ptcQuoteCss = "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:flex;width:100%;position:relative;overflow:hidden;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}:host(.image-quote) .quote-media{position:relative;flex-basis:auto}:host(.image-quote) .quote-media img{width:100%}:host(.image-quote) .quote-media .our-leadership{width:89%;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-04) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);top:0px;margin:0px auto;display:flex;position:relative;box-shadow:var(--ptc-shadow-large);background-color:var(--color-white);transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-black);color:var(--color-gray-10);line-height:var(--ptc-line-height-p);letter-spacing:var(--ptc-letter-spacing-loose);margin-block-end:0;margin-block-start:0}:host(.image-quote) .quote-media .our-leadership .line{height:2px;width:82%;position:absolute;top:20%}:host(.image-quote) .quote-media .our-leadership .line .green-line{width:30%;height:2px;background-color:var(--color-green-05);display:inline-block;position:absolute}:host(.image-quote) .quote-media .our-leadership .line .grey-line{width:70%;height:1px;background-color:var(--color-gray-03);display:inline-block;position:absolute;left:30%}:host(.image-quote) .quote-content{flex-basis:auto;display:flex;flex-flow:column nowrap}:host(.image-quote) .quote-content .quotemarks{flex-basis:7%;width:15%;margin-bottom:var(--ptc-element-spacing-03);max-width:2.5rem}:host(.image-quote) .quote-content blockquote{flex-basis:93%;margin-block-start:calc(-1 * var(--ptc-element-spacing-04));margin-inline-start:0;margin-inline-end:0}:host(.image-quote) .quote-content blockquote p{font-weight:var(--ptc-font-weight-medium);font-size:var(--ptc-font-size-x-small);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);letter-spacing:var(--ptc-letter-spacing-loose);margin:var(--ptc-element-spacing-04) 0}:host(.image-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-medium)}@media only screen and (min-width: 768px){:host(.image-quote) .quote-media .our-leadership{width:65%;padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);transform:translateY(-25%)}:host(.image-quote) .quote-media .our-leadership p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quotemarks{width:10%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-medium);letter-spacing:var(--ptc-letter-spacing-normal)}}@media only screen and (min-width: 992px){:host(.image-quote) .quote-content{margin-right:5%;margin-left:5%}:host(.image-quote) .quote-content blockquote p{font-size:var(--ptc-font-size-large)}:host(.image-quote) .quote-content .quote-name{font-size:var(--ptc-font-size-large)}}@media only screen and (min-width: 1200px){:host(.image-quote){flex-direction:row}:host(.image-quote) .quote-media{flex-basis:40%;padding:unset;margin:var(--ptc-layout-spacing-05) 0px 0px calc(var(--ptc-layout-spacing-06) * 2);padding-right:var(--ptc-element-spacing-08)}:host(.image-quote) .quote-media .our-leadership{width:78%;transform:translateY(-50%)}:host(.image-quote) .quote-media .our-leadership .line{top:18%}:host(.image-quote) .quote-content{flex-basis:58%;flex-flow:row nowrap;margin-left:unset;margin-right:unset}:host(.image-quote) .quote-content .quotemarks{flex-basis:8%;margin-right:var(--ptc-element-spacing-03)}}:host(.plain-quote) blockquote{margin:0 auto;padding:0 0 var(--ptc-element-spacing-04) var(--ptc-element-spacing-04);border-left:5px solid var(--color-green-05)}:host(.plain-quote) blockquote p{font-weight:var(--ptc-font-weight-regular);font-size:var(--ptc-font-size-medium);line-height:var(--ptc-line-height-p);font-style:var(--ptc-font-style-italic);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.plain-quote) .quote-content{flex-basis:auto}:host(.plain-quote) .quote-content .quote-name{display:block;margin-bottom:var(--ptc-element-spacing-07);font-size:var(--ptc-font-size-x-small)}:host(.value-led-quote){margin-bottom:32px}@media only screen and (min-width: 480px){:host(.value-led-quote){margin-bottom:48px}}:host(.value-led-quote) blockquote{margin:8px 0 8px 0;border-left:7px solid var(--color-green-07);padding-left:32px}@media only screen and (min-width: 480px){:host(.value-led-quote) blockquote{margin:16px 40px 0 40px}}@media only screen and (min-width: 992px){:host(.value-led-quote) blockquote{margin:24px 48px 8px 48px}}@media only screen and (min-width: 1440px){:host(.value-led-quote) blockquote{margin:8px 48px 8px 48px}}:host(.value-led-quote) blockquote p,:host(.value-led-quote) blockquote span{color:var(--color-gray-10);font-size:18px;font-weight:600;line-height:1.5}:host(.value-led-quote) blockquote .quote-name{font-weight:500}";
@@ -22002,6 +22069,7 @@ const PtcReadmore$1 = class extends HTMLElement$1 {
     });
     this.enableAddTruncatedClass('tab-header');
     this.enableAddTruncatedClass('ptc-ellipsis-dropdown');
+    this.enableAddTruncatedClass('ptc-product-highlight-card');
   }
   // click event handler
   handleClick(event) {
@@ -28763,7 +28831,7 @@ const PtcDynamicCard = /*@__PURE__*/proxyCustomElement(PtcDynamicCard$1, [1,"ptc
 const PtcEllipsisDropdown = /*@__PURE__*/proxyCustomElement(PtcEllipsisDropdown$1, [1,"ptc-ellipsis-dropdown",{"dataItems":[16],"selectedTab":[1,"selected-tab"],"dropdownType":[1,"dropdown-type"],"isDropdownOpen":[32],"isMobile":[32],"isIPad":[32]},[[4,"click","offClick"],[9,"resize","handleResize"]]]);
 const PtcEmbeddedQuiz = /*@__PURE__*/proxyCustomElement(PtcEmbeddedQuiz$1, [1,"ptc-embedded-quiz",{"getQuizEndpoint":[1,"get-quiz-endpoint"],"quiz":[32],"slide":[32],"traversal":[32]}]);
 const PtcFeaturedList = /*@__PURE__*/proxyCustomElement(PtcFeaturedList$1, [1,"ptc-featured-list",{"isMobile":[32],"selectedTabGloble":[32]},[[9,"resize","handleResize"],[4,"flTabClicked","handleflTabClicked"]]]);
-const PtcFilterDropdown = /*@__PURE__*/proxyCustomElement(PtcFilterDropdown$1, [1,"ptc-filter-dropdown",{"placeholder":[1],"selectedTag":[1,"selected-tag"],"internalOptions":[32],"selectedOptions":[32],"isOpen":[32]}]);
+const PtcFilterDropdown = /*@__PURE__*/proxyCustomElement(PtcFilterDropdown$1, [1,"ptc-filter-dropdown",{"placeholder":[1],"selectedTag":[1,"selected-tag"],"styles":[1],"internalOptions":[32],"selectedOptions":[32],"isOpen":[32]}]);
 const PtcFilterLevelTheater = /*@__PURE__*/proxyCustomElement(PtcFilterLevelTheater$1, [2,"ptc-filter-level-theater",{"enableFilters":[4,"enable-filters"],"backButtonText":[1,"back-button-text"],"selectedTab":[32],"lastSelectedTab":[32],"lastSelectedTabGroup":[32],"selectedTabGroup":[32]}]);
 const PtcFilterTag = /*@__PURE__*/proxyCustomElement(PtcFilterTag$1, [1,"ptc-filter-tag",{"theme":[1],"styles":[1],"iconColorMap":[32]}]);
 const PtcFooter = /*@__PURE__*/proxyCustomElement(PtcFooter$1, [4,"ptc-footer",{"backgroundImage":[1,"background-image"],"isTabMob":[32]},[[9,"resize","handleWindowResize"]]]);
@@ -28816,10 +28884,11 @@ const PtcPricingTabs = /*@__PURE__*/proxyCustomElement(PtcPricingTabs$1, [1,"ptc
 const PtcProductCard = /*@__PURE__*/proxyCustomElement(PtcProductCard$1, [1,"ptc-product-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"cardDescription":[1,"card-description"],"cardCtaText":[1,"card-cta-text"],"toggleCtaTitle":[1,"toggle-cta-title"],"isSlotEmpty":[4,"is-slot-empty"],"isOpen":[32]}]);
 const PtcProductCategory = /*@__PURE__*/proxyCustomElement(PtcProductCategory$1, [1,"ptc-product-category",{"categoryTitle":[1,"category-title"],"categoryDescription":[1,"category-description"]}]);
 const PtcProductDropdown = /*@__PURE__*/proxyCustomElement(PtcProductDropdown$1, [1,"ptc-product-dropdown",{"newOptions":[16],"selectedOptions":[16],"placeholder":[1],"internalOptions":[32],"isOpen":[32]},[[4,"clearsearch","handleSearchResult"],[4,"inputChanged","handleinputChanged"]]]);
-const PtcProductHighlightCard = /*@__PURE__*/proxyCustomElement(PtcProductHighlightCard$1, [1,"ptc-product-highlight-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"cardDescription":[1,"card-description"]}]);
+const PtcProductHighlightCard = /*@__PURE__*/proxyCustomElement(PtcProductHighlightCard$1, [1,"ptc-product-highlight-card",{"cardTitle":[1,"card-title"],"cardImage":[1,"card-image"],"cardImageAltText":[1,"card-image-alt-text"],"moreText":[1025,"more-text"],"lessText":[1025,"less-text"],"cardDescription":[1,"card-description"]}]);
 const PtcProductList = /*@__PURE__*/proxyCustomElement(PtcProductList$1, [1,"ptc-product-list",{"emptyTitle":[1,"empty-title"],"emptySubTitle":[1,"empty-sub-title"],"clearButtonLabel":[1,"clear-button-label"]},[[4,"selectedResult","handleSearchResult"],[4,"clearsearch","handleSearchResult"],[4,"selectedValues","handleMultipleSearchResult"],[4,"emptyResult","handleEmptyResult"]]]);
 const PtcProductSidebar = /*@__PURE__*/proxyCustomElement(PtcProductSidebar$1, [1,"ptc-product-sidebar",{"filterResults":[1,"filter-results"],"filterText":[1,"filter-text"],"clearText":[1,"clear-text"],"technologyText":[1,"technology-text"],"jumpToProduct":[1,"jump-to-product"],"selectTechnology":[1,"select-technology"],"suggestionList":[16],"searchTerm":[32],"suggestions":[32]},[[4,"dropdownTouched","handleDropdownTouched"],[0,"click","handleClick"],[4,"clearCtaClicked","handleclearCtaClicked"],[4,"selectedValues","handleSelectedValues"]]]);
 const PtcProgressBar = /*@__PURE__*/proxyCustomElement(PtcProgressBar$1, [1,"ptc-progress-bar",{"scrollPercentage":[32]},[[9,"scroll","handleScroll"]]]);
+const PtcQuantityCounter = /*@__PURE__*/proxyCustomElement(PtcQuantityCounter$1, [1,"ptc-quantity-counter",{"addToCartLabel":[1,"add-to-cart-label"],"addedLabel":[1,"added-label"],"count":[32]}]);
 const PtcQuote = /*@__PURE__*/proxyCustomElement(PtcQuote$1, [1,"ptc-quote",{"quoteType":[1025,"quote-type"],"quoteName":[1025,"quote-name"],"ctaText":[1,"cta-text"],"ctaUrl":[1,"cta-url"],"imgSrc":[1,"img-src"],"imgTitle":[1,"img-title"],"quoteImage":[1,"quote-image"]}]);
 const PtcReadmore = /*@__PURE__*/proxyCustomElement(PtcReadmore$1, [1,"ptc-readmore",{"moreText":[1025,"more-text"],"lessText":[1025,"less-text"],"readMorePosition":[1,"read-more-position"],"display":[1],"visibleLines":[1,"visible-lines"],"visibleLinesCustom":[2,"visible-lines-custom"],"zIndex":[1,"z-index"],"checked":[1028],"size":[1],"isIcon":[4,"is-icon"],"color":[1]},[[9,"resize","updateReadmoreStatus"]]]);
 const PtcReadmoreChar = /*@__PURE__*/proxyCustomElement(PtcReadmoreChar$1, [1,"ptc-readmore-char",{"maxCharacters":[2,"max-characters"],"description":[1],"readMoreText":[1,"read-more-text"],"readLessText":[1,"read-less-text"],"expanded":[32]}]);
@@ -28979,6 +29048,7 @@ const defineCustomElements = (opts) => {
   PtcProductList,
   PtcProductSidebar,
   PtcProgressBar,
+  PtcQuantityCounter,
   PtcQuote,
   PtcReadmore,
   PtcReadmoreChar,
@@ -29035,4 +29105,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { AcademicFormTest, AuthorListingExample, BundleExample, BundleJumbotronExample, DropdownItem, DynamicBoxBundle, EmbeddedForm, FeaturedList, FlTabContent, FlTabHeader, FlTabImage, FooterForm, HomepageClickableTab, HomepageJumbotron, HomepageToggledContent, IconAsset, InnovatorToggleContainer, JumbotronSubMenu, JumbotronSubMune, ListItem, MaxWidthContainer, MostPopularNews, MyComponent, NewsSearchResult, PtcAccordion, PtcAccordionItem, PtcAnnouncement, PtcBackToTop, PtcBackgroundVideo, PtcBadge, PtcBioCard, PtcBreadcrumb, PtcBrightcovVideo, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardWrapper, PtcCaseStudiesSlider, PtcCheckbox, PtcCheckboxGroup, PtcCloseIcon, PtcCollapseList, PtcContainer, PtcDataLookup, PtcDate, PtcDropdown, PtcDynamicCard, PtcEllipsisDropdown, PtcEmbeddedQuiz, PtcFeaturedList, PtcFilterDropdown, PtcFilterLevelTheater, PtcFilterTag, PtcFooter, PtcForm, PtcFormCheckbox, PtcFormRadioButton, PtcFormRadioGroup, PtcHero, PtcHeroFooterCta, PtcHomepageImageFeature, PtcHomepageVideoBackground, PtcIconCard, PtcIconComponent, PtcIconList, PtcIconMinimize, PtcImageDownloadStrip, PtcImg, PtcInfoTile, PtcJumbotron, PtcLink, PtcList, PtcMediaCard, PtcMinimizedNav, PtcMobileSelect, PtcModal, PtcModalQuiz, PtcMultiSelect, PtcNavCard, PtcNavLink, PtcNavPills, PtcNavSlider, PtcNavSubmenu, PtcNavTile, PtcNews, PtcOfficeLocationCard, PtcOfficeLocations, PtcOverlay, PtcPagenation, PtcPara, PtcPicture, PtcPodcastCard, PtcPreferanceCenterForm, PtcPreloaderSection, PtcPreviousUrl, PtcPricingAddOnCard, PtcPricingAddOnSection, PtcPricingBlock, PtcPricingPackagingTable, PtcPricingTabs, PtcProductCard, PtcProductCategory, PtcProductDropdown, PtcProductHighlightCard, PtcProductList, PtcProductSidebar, PtcProgressBar, PtcQuote, PtcReadmore, PtcReadmoreChar, PtcReadmoreV2, PtcRelatedCardRail, PtcResponsiveWrapper, PtcSearchField, PtcSelect, PtcSeoTitle, PtcShoppingCart, PtcShowcaseCard, PtcSkeleton, PtcSlitCard, PtcSocialIconsFooter, PtcSocialShare, PtcSpacer, PtcSpan, PtcSquareCard, PtcStickyIcons, PtcStickySection, PtcStickyTitle, PtcSubnav, PtcSubnavCard, PtcSvgBtn, PtcTab, PtcTabList, PtcTabs, PtcTextCopyWithBackground, PtcTextfield, PtcTheaterVideo, PtcTheaterVideoModal, PtcTheaterVideoPlaylist, PtcTitle, PtcTooltip, PtcTooltipV2, PtcTwoColumnMedia, PtcValueLedCard, PtcValueLedContent, PtcValueLedContentHighlight, PtcValueLedIntro, PtcValueLedLayout, PtcValueLedSpeedBump, PtcValuePropCard, PtcWhitePaper, SequentialBundle, SequentialBundleExample, TabContent, TabHeader, defineCustomElements };
+export { AcademicFormTest, AuthorListingExample, BundleExample, BundleJumbotronExample, DropdownItem, DynamicBoxBundle, EmbeddedForm, FeaturedList, FlTabContent, FlTabHeader, FlTabImage, FooterForm, HomepageClickableTab, HomepageJumbotron, HomepageToggledContent, IconAsset, InnovatorToggleContainer, JumbotronSubMenu, JumbotronSubMune, ListItem, MaxWidthContainer, MostPopularNews, MyComponent, NewsSearchResult, PtcAccordion, PtcAccordionItem, PtcAnnouncement, PtcBackToTop, PtcBackgroundVideo, PtcBadge, PtcBioCard, PtcBreadcrumb, PtcBrightcovVideo, PtcButton, PtcCard, PtcCardBottom, PtcCardContent, PtcCardWrapper, PtcCaseStudiesSlider, PtcCheckbox, PtcCheckboxGroup, PtcCloseIcon, PtcCollapseList, PtcContainer, PtcDataLookup, PtcDate, PtcDropdown, PtcDynamicCard, PtcEllipsisDropdown, PtcEmbeddedQuiz, PtcFeaturedList, PtcFilterDropdown, PtcFilterLevelTheater, PtcFilterTag, PtcFooter, PtcForm, PtcFormCheckbox, PtcFormRadioButton, PtcFormRadioGroup, PtcHero, PtcHeroFooterCta, PtcHomepageImageFeature, PtcHomepageVideoBackground, PtcIconCard, PtcIconComponent, PtcIconList, PtcIconMinimize, PtcImageDownloadStrip, PtcImg, PtcInfoTile, PtcJumbotron, PtcLink, PtcList, PtcMediaCard, PtcMinimizedNav, PtcMobileSelect, PtcModal, PtcModalQuiz, PtcMultiSelect, PtcNavCard, PtcNavLink, PtcNavPills, PtcNavSlider, PtcNavSubmenu, PtcNavTile, PtcNews, PtcOfficeLocationCard, PtcOfficeLocations, PtcOverlay, PtcPagenation, PtcPara, PtcPicture, PtcPodcastCard, PtcPreferanceCenterForm, PtcPreloaderSection, PtcPreviousUrl, PtcPricingAddOnCard, PtcPricingAddOnSection, PtcPricingBlock, PtcPricingPackagingTable, PtcPricingTabs, PtcProductCard, PtcProductCategory, PtcProductDropdown, PtcProductHighlightCard, PtcProductList, PtcProductSidebar, PtcProgressBar, PtcQuantityCounter, PtcQuote, PtcReadmore, PtcReadmoreChar, PtcReadmoreV2, PtcRelatedCardRail, PtcResponsiveWrapper, PtcSearchField, PtcSelect, PtcSeoTitle, PtcShoppingCart, PtcShowcaseCard, PtcSkeleton, PtcSlitCard, PtcSocialIconsFooter, PtcSocialShare, PtcSpacer, PtcSpan, PtcSquareCard, PtcStickyIcons, PtcStickySection, PtcStickyTitle, PtcSubnav, PtcSubnavCard, PtcSvgBtn, PtcTab, PtcTabList, PtcTabs, PtcTextCopyWithBackground, PtcTextfield, PtcTheaterVideo, PtcTheaterVideoModal, PtcTheaterVideoPlaylist, PtcTitle, PtcTooltip, PtcTooltipV2, PtcTwoColumnMedia, PtcValueLedCard, PtcValueLedContent, PtcValueLedContentHighlight, PtcValueLedIntro, PtcValueLedLayout, PtcValueLedSpeedBump, PtcValuePropCard, PtcWhitePaper, SequentialBundle, SequentialBundleExample, TabContent, TabHeader, defineCustomElements };