npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.15-beta → 6.3.16-beta - Mend

@ptcwebops/ptcw-design 6.3.15-beta → 6.3.16-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (378) hide show

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css CHANGED Viewed

@@ -995,30 +995,30 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
-storefront-enhanced-product-list-example .swiper {
+storefront-enhanced-product-list-example .swiper, storefront-enhanced-product-list-alt-example .swiper {
   width: 100%;
   height: 100%;
 }
-storefront-enhanced-product-list-example .swiper-container {
+storefront-enhanced-product-list-example .swiper-container, storefront-enhanced-product-list-alt-example .swiper-container {
   padding-left: 24px;
   padding-right: 24px;
   margin-left: -24px;
   margin-right: -24px;
   overflow-x: clip;
 }
-storefront-enhanced-product-list-example .swiper-wrapper {
+storefront-enhanced-product-list-example .swiper-wrapper, storefront-enhanced-product-list-alt-example .swiper-wrapper {
   max-width: 1200px;
 }
-storefront-enhanced-product-list-example .swiper-slide {
+storefront-enhanced-product-list-example .swiper-slide, storefront-enhanced-product-list-alt-example .swiper-slide {
   width: max-content;
   height: auto;
 }
-storefront-enhanced-product-list-example .swiper-horizontal {
+storefront-enhanced-product-list-example .swiper-horizontal, storefront-enhanced-product-list-alt-example .swiper-horizontal {
   position: relative;
   display: block;
   padding-bottom: 4.104rem;
 }
-storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar, storefront-enhanced-product-list-alt-example .swiper-horizontal .swiper-scrollbar {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -13px);
@@ -1028,25 +1028,28 @@ storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar {
   border-radius: 999px;
   background: #E4E7E9;
 }
-storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
+storefront-enhanced-product-list-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag, storefront-enhanced-product-list-alt-example .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
   background: #323B42;
   transform: translateX(-16px);
 }
-storefront-enhanced-product-list-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]) {
+storefront-enhanced-product-list-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]), storefront-enhanced-product-list-alt-example .swiper-horizontal:has(.swiper-scrollbar[style*="display: none"]) {
   padding-bottom: 0;
 }
 storefront-enhanced-product-list-example .swiper-button-prev:after,
-storefront-enhanced-product-list-example .swiper-button-next:after {
+storefront-enhanced-product-list-example .swiper-button-next:after, storefront-enhanced-product-list-alt-example .swiper-button-prev:after,
+storefront-enhanced-product-list-alt-example .swiper-button-next:after {
   content: none;
 }
 storefront-enhanced-product-list-example .swiper-button-prev img,
-storefront-enhanced-product-list-example .swiper-button-next img {
+storefront-enhanced-product-list-example .swiper-button-next img, storefront-enhanced-product-list-alt-example .swiper-button-prev img,
+storefront-enhanced-product-list-alt-example .swiper-button-next img {
   background-color: #ffffff;
 }
 storefront-enhanced-product-list-example .swiper-button-prev,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next, storefront-enhanced-product-list-alt-example .swiper-button-prev,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next {
   top: auto;
   bottom: 0px;
   left: auto;
@@ -1056,7 +1059,8 @@ storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next {
   border-radius: 4px;
 }
 storefront-enhanced-product-list-example .swiper-button-prev:hover,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover, storefront-enhanced-product-list-alt-example .swiper-button-prev:hover,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
@@ -1065,19 +1069,23 @@ storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:hover {
 }
 storefront-enhanced-product-list-example .swiper-button-prev:focus, storefront-enhanced-product-list-example .swiper-button-prev:active,
 storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:focus,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:active {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next:active, storefront-enhanced-product-list-alt-example .swiper-button-prev:focus, storefront-enhanced-product-list-alt-example .swiper-button-prev:active,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:focus,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
   background-color: #BEC6CA;
 }
 storefront-enhanced-product-list-example .swiper-button-prev svg,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next svg {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-next svg, storefront-enhanced-product-list-alt-example .swiper-button-prev svg,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-next svg {
   height: 14px;
   width: 9px;
 }
 storefront-enhanced-product-list-example .swiper-button-next,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev, storefront-enhanced-product-list-alt-example .swiper-button-next,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev {
   top: auto;
   bottom: 0px;
   right: auto;
@@ -1087,7 +1095,8 @@ storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev {
   border-radius: 4px;
 }
 storefront-enhanced-product-list-example .swiper-button-next:hover,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover, storefront-enhanced-product-list-alt-example .swiper-button-next:hover,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:hover {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
@@ -1096,19 +1105,22 @@ storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:hover {
 }
 storefront-enhanced-product-list-example .swiper-button-next:focus, storefront-enhanced-product-list-example .swiper-button-next:active,
 storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:focus,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:active {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev:active, storefront-enhanced-product-list-alt-example .swiper-button-next:focus, storefront-enhanced-product-list-alt-example .swiper-button-next:active,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:focus,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev:active {
   outline: none;
   outline-offset: 0;
   text-decoration: none;
   background-color: #BEC6CA;
 }
 storefront-enhanced-product-list-example .swiper-button-next svg,
-storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev svg {
+storefront-enhanced-product-list-example .swiper-rtl .swiper-button-prev svg, storefront-enhanced-product-list-alt-example .swiper-button-next svg,
+storefront-enhanced-product-list-alt-example .swiper-rtl .swiper-button-prev svg {
   height: 14px;
   width: 9px;
 }
 @media only screen and (min-width: 768px) {
-  storefront-enhanced-product-list-example .swiper-container {
+  storefront-enhanced-product-list-example .swiper-container, storefront-enhanced-product-list-alt-example .swiper-container {
     padding-left: 4px;
     padding-right: 4px;
     margin-left: -4px;

package/dist/collection/components/ptc-enhanced-product-listing-card/ptc-enhanced-product-listing-card.css CHANGED Viewed

@@ -72,6 +72,10 @@ ptc-link, ptc-square-card,
   background: #FFF;
   box-shadow: var(--ptc-shadow-small);
 }
+:host .card.alternate {
+  padding: 40px 32px;
+  min-width: 288px;
+}
 :host .ribbon {
   position: absolute;
   top: 32px;
@@ -97,6 +101,9 @@ ptc-link, ptc-square-card,
 :host .flex-start {
   padding-top: 48px;
 }
+:host .alternate .flex-start {
+  padding-top: 0px;
+}
 :host .pricing {
   display: flex;
   gap: 4px;

package/dist/collection/components/ptc-enhanced-product-listing-card/ptc-enhanced-product-listing-card.js CHANGED Viewed

@@ -30,6 +30,8 @@ export class PtcEnhancedProductListingCard {
       }
     };
     this.cardIndex = 0;
+    this.theme = 'standard';
+    this.disablePriceLabel = undefined;
     this.featureCallouts = [];
     this.cta = {
       href: "",
@@ -39,7 +41,14 @@ export class PtcEnhancedProductListingCard {
     };
   }
   render() {
-    return (h(Host, null, h("div", { class: "card" }, h("div", { class: "ribbon" }, h("svg", { class: "ribbon-wrap-around", xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none" }, h("path", { d: "M4 3.02124L0 0.0212402H4V3.02124Z", fill: "#08283E" })), h("slot", { name: "ribbon-text" })), h("div", { class: "flex-start" }, h("ptc-title", { "seo-compatibility-mode": true, type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, h("h3", null, h("slot", { name: "heading" }))), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-5" }, h("p", null, h("slot", { name: "description" }))), h("div", null, (this.featureCallouts.length > 0) && this.featureCallouts.map((feature, idx) => (h("ptc-icon-list", { "is-last-item": (idx === this.featureCallouts.length - 1) ? "true" : "false", "no-bottom-space": (idx === this.featureCallouts.length - 1) ? "true" : "false", "list-content": feature, "list-type": "feature-callout-list" }, h("icon-asset", { slot: "icon", type: "ptc", size: "x-small", name: "checkmark", color: "ptc-green" })))))), h("div", { class: "flex-end" }, h("div", { class: "pricing" }, h("span", { class: "pricing-label" }, h("slot", { name: "pricing-label" })), h("span", { class: "pricing-value" }, h("slot", { name: "pricing-value" }))), h("ptc-button", { color: "ptc-quaternary", "link-href": this.cta.href, "link-title": this.cta.title || this.cta.text, target: this.cta.target, type: "button", "tracker-id": `eplc${this.cardIndex}-cta` }, this.cta.text)))));
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("div", { class: classMap }, this.theme == 'standard' && h("div", { class: "ribbon" }, h("svg", { class: "ribbon-wrap-around", xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none" }, h("path", { d: "M4 3.02124L0 0.0212402H4V3.02124Z", fill: "#08283E" })), h("slot", { name: "ribbon-text" })), h("div", { class: "flex-start" }, h("ptc-title", { "seo-compatibility-mode": true, type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, h("h3", null, h("slot", { name: "heading" }))), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-5" }, h("p", null, h("slot", { name: "description" }))), h("div", null, (this.featureCallouts.length > 0) && this.featureCallouts.map((feature, idx) => (h("ptc-icon-list", { "is-last-item": (idx === this.featureCallouts.length - 1) ? "true" : "false", "no-bottom-space": (idx === this.featureCallouts.length - 1) ? "true" : "false", "list-content": feature, "list-type": "feature-callout-list" }, h("icon-asset", { slot: "icon", type: "ptc", size: "x-small", name: "checkmark", color: "ptc-green" })))))), h("div", { class: "flex-end" }, h("div", { class: "pricing" }, !this.disablePriceLabel && h("span", { class: "pricing-label" }, h("slot", { name: "pricing-label" })), h("span", { class: "pricing-value" }, h("slot", { name: "pricing-value" }))), h("ptc-button", { color: "ptc-quaternary", "link-href": this.cta.href, "link-title": this.cta.title || this.cta.text, target: this.cta.target, type: "button", "tracker-id": `eplc${this.cardIndex}-cta` }, this.cta.text)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.theme]: true,
+      ['card']: true
+    };
   }
   static get is() { return "ptc-enhanced-product-listing-card"; }
   static get encapsulation() { return "shadow"; }
@@ -72,6 +81,41 @@ export class PtcEnhancedProductListingCard {
         "attribute": "card-index",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'alternate'",
+          "resolved": "\"alternate\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "disablePriceLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-price-label",
+        "reflect": false
       }
     };
   }

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

@@ -1034,6 +1034,12 @@ export const SequentialBundleExample: {
   new (): SequentialBundleExample;
 };
+interface StorefrontEnhancedProductListAltExample extends Components.StorefrontEnhancedProductListAltExample, HTMLElement {}
+export const StorefrontEnhancedProductListAltExample: {
+  prototype: StorefrontEnhancedProductListAltExample;
+  new (): StorefrontEnhancedProductListAltExample;
+};
 interface StorefrontEnhancedProductListExample extends Components.StorefrontEnhancedProductListExample, HTMLElement {}
 export const StorefrontEnhancedProductListExample: {
   prototype: StorefrontEnhancedProductListExample;