@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

package/dist/collection/components/organism-bundles/sequential-bundle-example/sequential-bundle-example.js

@@ -1,17 +1,11 @@
-import { Host, h, getAssetPath, } from "@stencil/core";
+import { Host, h, getAssetPath } from '@stencil/core';
 // import Swiper JS
-import Swiper from "swiper";
+import Swiper from 'swiper';
 export class SequentialBundleExample {
   constructor() {
     this.isConnected = false;
-    this.dotSvg = getAssetPath("./media/nav-active-dotslick.svg");
-    this.isInteralCardsExpanded = [
-      true,
-      false,
-      false,
-      false,
-      false,
-    ];
+    this.dotSvg = getAssetPath('./media/nav-active-dotslick.svg');
+    this.isInteralCardsExpanded = [true, false, false, false, false];
     this.isMobile = false;
     this.expandedCardIndex = 0;
   }
@@ -22,7 +16,7 @@ export class SequentialBundleExample {
     if (this.isMobile && !this.mySwiper && this.isConnected) {
       let that = this;
       const createSwiper = () => {
-        let tempSwiperContainer = that.el.shadowRoot.querySelector(".swiper-container");
+        let tempSwiperContainer = that.el.shadowRoot.querySelector('.swiper-container');
         if (tempSwiperContainer) {
           that.mySwiper = new Swiper(tempSwiperContainer, {
             slidesPerView: "auto",
@@ -31,14 +25,14 @@ export class SequentialBundleExample {
             initialSlide: 1,
             loop: true,
             pagination: {
-              el: ".swiper-pagination",
-              type: "bullets",
+              el: '.swiper-pagination',
+              type: 'bullets',
             },
             breakpoints: {
               768: {
                 slidesPerView: 2,
               },
-            },
+            }
           });
         }
         else {
@@ -70,19 +64,20 @@ export class SequentialBundleExample {
     this.expandedCardIndex = index;
     this.isInteralCardsExpanded = this.isInteralCardsExpanded.map((_, i) => i === index);
   }
+  ;
   handleCardOpened(event) {
     const openedCardIndex = event.detail;
     this.handleCardToggle(parseInt(openedCardIndex) - 1);
   }
   render() {
     const deskTCards = [
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[0], class: "light-links", "tracker-id": "1" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p", "is-dark-mode": true }, h("a", { href: "/en/resources/augmented-reality-on-demand/implementing-ar-for-training" }, "medical devices", " "), "are operating properly and receiving quality service."), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank", darkFocusState: true }, "Learn More")),
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": "2", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[1] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": "3", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[2] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": "4", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[3] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
-      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": "5", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[4] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[0], class: 'light-links', "tracker-id": '1' }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p", "is-dark-mode": true }, h("a", { href: "/en/resources/augmented-reality-on-demand/implementing-ar-for-training" }, "medical devices "), "are operating properly and receiving quality service."), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank", darkFocusState: true }, "Learn More")),
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": '2', "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[1] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": '3', "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[2] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": '4', "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[3] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
+      h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "desktop", "tracker-id": '5', "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test", "is-expanded": this.isInteralCardsExpanded[4] }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")),
     ];
-    return (h(Host, null, h("slot", { name: "seo-content" }), this.isMobile ? (h("div", { class: "swiper-container mobile-container" }, h("div", { class: "swiper-wrapper" }, h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")))), h("div", { class: "swiper-pagination" }))) : ([
+    return (h(Host, null, h("slot", { name: 'seo-content' }), this.isMobile ? (h("div", { class: "swiper-container mobile-container" }, h("div", { class: "swiper-wrapper" }, h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More"))), h("div", { class: "swiper-slide" }, h("ptc-dynamic-card", { "card-type": "sequential", "card-screen": "mobile", "card-title": "iWarranty Business Update Webinar", "card-img-src": "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data", "card-img-alt": "image-test" }, h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-margin": "margin-flush", "para-color": "white", "para-line-h": "line-height-p" }, "The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!"), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": "https://www.ptc.com", target: "_blank" }, "Learn More")))), h("div", { class: "swiper-pagination" }))) : ([
       h("div", { class: "accordion-container desktop-container" }, deskTCards.map((card, index) => (h("div", { class: {
           card: true,
           expanded: index === this.expandedCardIndex,
@@ -93,8 +88,8 @@ export class SequentialBundleExample {
           this.handleCardToggle(index);
         } }, card)))),
       h("div", { class: "pagination desktop-pagination" }, deskTCards.map((_, index) => (h("div", { class: {
-          "pagination-dot": true,
-          active: index === this.expandedCardIndex,
+          'pagination-dot': true,
+          'active': index === this.expandedCardIndex,
         }, onClick: this.handleCardToggle.bind(this, index) })))),
       h("div", { hidden: true }, h("svg", null, h("use", { href: `${this.dotSvg}` }))),
     ])));
@@ -130,7 +125,7 @@ export class SequentialBundleExample {
           "tags": [],
           "text": ""
         },
-        "defaultValue": "[\r\n\t\ttrue,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t]"
+        "defaultValue": "[true, false, false, false, false]"
       }
     };
   }

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-alt-example.js

@@ -1,13 +1,13 @@
-import { Host, h } from "@stencil/core";
-import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from "swiper";
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class StorefrontEnhancedProductListAltExample {
   constructor() {
     this.componentDidLoad = () => {
       setTimeout(() => {
-        let swiperContainer = this.el.querySelector(".enhanced-product-listing-cards");
+        let swiperContainer = this.el.querySelector('.enhanced-product-listing-cards');
         this.swiper = new Swiper(swiperContainer, {
           modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-          slidesPerView: "auto",
+          slidesPerView: 'auto',
           spaceBetween: 24,
           initialSlide: 0,
           centerInsufficientSlides: false,
@@ -38,15 +38,15 @@ export class StorefrontEnhancedProductListAltExample {
             },
           },
         });
-        swiperContainer.addEventListener("ctaFocussed", (e) => {
-          let focusIndex = e.detail["card-index"];
+        swiperContainer.addEventListener('ctaFocussed', (e) => {
+          let focusIndex = e.detail['card-index'];
           this.swiper.slideTo(focusIndex);
         });
       }, 100);
     };
   }
   render() {
-    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "storefront-enhanced-product-list-alt-example"; }
   static get originalStyleUrls() {

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

@@ -708,10 +708,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -730,10 +728,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -999,36 +995,30 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
     transform: rotate(360deg);
   }
 }
-storefront-enhanced-product-list-example .swiper,
-storefront-enhanced-product-list-alt-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-alt-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-alt-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-alt-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-alt-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-alt-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);
@@ -1036,34 +1026,29 @@ storefront-enhanced-product-list-alt-example .swiper-horizontal .swiper-scrollba
   width: 161px;
   height: 8px;
   border-radius: 999px;
-  background: #e4e7e9;
+  background: #E4E7E9;
 }
-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 {
+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;
+  background: #323B42;
   transform: translateX(-16px);
 }
-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"]) {
+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-alt-example .swiper-button-prev: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-alt-example .swiper-button-prev 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-alt-example .swiper-button-prev,
+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;
@@ -1074,37 +1059,32 @@ storefront-enhanced-product-list-alt-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-alt-example .swiper-button-prev: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;
-  background-color: #e4e7e9;
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
 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-alt-example .swiper-button-prev:focus,
-storefront-enhanced-product-list-alt-example .swiper-button-prev: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;
+  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-alt-example .swiper-button-prev 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-alt-example .swiper-button-next,
+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;
@@ -1115,37 +1095,32 @@ storefront-enhanced-product-list-alt-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-alt-example .swiper-button-next: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;
-  background-color: #e4e7e9;
+  background-color: #E4E7E9;
   transition: var(--ptc-transition-slow) linear;
 }
 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-alt-example .swiper-button-next:focus,
-storefront-enhanced-product-list-alt-example .swiper-button-next: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;
+  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-alt-example .swiper-button-next 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-alt-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/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.js

@@ -1,13 +1,13 @@
-import { Host, h } from "@stencil/core";
-import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from "swiper";
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
 export class StorefrontEnhancedProductListExample {
   constructor() {
     this.componentDidLoad = () => {
       setTimeout(() => {
-        let swiperContainer = this.el.querySelector(".enhanced-product-listing-cards");
+        let swiperContainer = this.el.querySelector('.enhanced-product-listing-cards');
         this.swiper = new Swiper(swiperContainer, {
           modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-          slidesPerView: "auto",
+          slidesPerView: 'auto',
           spaceBetween: 24,
           initialSlide: 0,
           centerInsufficientSlides: false,
@@ -38,15 +38,15 @@ export class StorefrontEnhancedProductListExample {
             },
           },
         });
-        swiperContainer.addEventListener("ctaFocussed", (e) => {
-          let focusIndex = e.detail["card-index"];
+        swiperContainer.addEventListener('ctaFocussed', (e) => {
+          let focusIndex = e.detail['card-index'];
           this.swiper.slideTo(focusIndex);
         });
       }, 100);
     };
   }
   render() {
-    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: (el) => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: (el) => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: (el) => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "storefront-enhanced-product-list-example"; }
   static get originalStyleUrls() {

package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.css

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

package/dist/collection/components/ptc-accordion/ptc-accordion-item/ptc-accordion-item.js

@@ -1,10 +1,10 @@
-import { Host, h, } from "@stencil/core";
-import { isHiddenUntilSupported } from "../../../utils/utils";
-import { hasSlot } from "../../../utils/component";
+import { Host, h } from '@stencil/core';
+import { isHiddenUntilSupported } from '../../../utils/utils';
+import { hasSlot } from '../../../utils/component';
 export class PtcAccordionItem {
   constructor() {
     this.heading = null;
-    this.headingTag = "h3";
+    this.headingTag = 'h3';
     this.autoHeight = false;
     this.active = false;
     this.theme = "standard";
@@ -14,36 +14,36 @@ export class PtcAccordionItem {
     this.hasArrowSlot = true;
   }
   componentWillLoad() {
-    this.hasHeadingSlot = hasSlot(this.el, "heading");
-    this.hasArrowSlot = hasSlot(this.el, "arrow");
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
     this.allowHiddenUntil = isHiddenUntilSupported();
   }
   componentDidLoad() {
     if (this.autoHeight) {
-      this.bodyEl.style.setProperty("--ptc-accordion-item-body-max-height", this.bodyEl.scrollHeight + 2 + "px");
+      this.bodyEl.style.setProperty('--ptc-accordion-item-body-max-height', this.bodyEl.scrollHeight + 2 + 'px');
     }
     this.onTransitionEnd();
-    this.bodyEl.addEventListener("transitionstart", () => {
+    this.bodyEl.addEventListener('transitionstart', () => {
       this.onTransitionStart();
     });
-    this.bodyEl.addEventListener("transitionend", () => {
+    this.bodyEl.addEventListener('transitionend', () => {
       this.onTransitionEnd();
     });
-    this.hasHeadingSlot = hasSlot(this.el, "heading");
-    this.hasArrowSlot = hasSlot(this.el, "arrow");
+    this.hasHeadingSlot = hasSlot(this.el, 'heading');
+    this.hasArrowSlot = hasSlot(this.el, 'arrow');
   }
   onTransitionEnd() {
     if (this.active) {
-      this.bodyEl.style.overflow = "auto";
+      this.bodyEl.style.overflow = 'auto';
       this.opened.emit();
     }
     else {
-      this.bodyEl.style.overflow = "hidden";
+      this.bodyEl.style.overflow = 'hidden';
       if (this.allowHiddenUntil) {
-        this.bodyEl.setAttribute("hidden", "until-found");
+        this.bodyEl.setAttribute('hidden', 'until-found');
       }
       else {
-        this.bodyEl.style.visibility = "hidden";
+        this.bodyEl.style.visibility = 'hidden';
       }
       this.closed.emit();
     }
@@ -51,10 +51,10 @@ export class PtcAccordionItem {
   onTransitionStart() {
     if (this.active) {
       if (this.allowHiddenUntil) {
-        this.bodyEl.removeAttribute("hidden");
+        this.bodyEl.removeAttribute('hidden');
       }
       else {
-        this.bodyEl.style.visibility = "visible";
+        this.bodyEl.style.visibility = 'visible';
       }
       this.opening.emit();
     }
@@ -90,17 +90,9 @@ export class PtcAccordionItem {
   }
   render() {
     const { active, autoHeight, theme, headingTag: HeadingTag } = this;
-    const container = (h("div", { class: "body-container", ref: (el) => (this.bodyEl = el),
-      //@ts-ignore
-      onBeforeMatch: () => {
-        this.beforeMatch();
-      } }, h("div", { class: "body" }, h("slot", null))));
-    return (h(Host, { class: { active, autoHeight }, id: this.trackerId }, this.styles && h("style", null, this.styles), h("button", { class: {
-        heading: true,
-        [theme]: true,
-        "mf-listen": true,
-        "focus-status": true,
-      }, role: "button", onClick: () => this.toggle(), id: this.trackerId }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), container));
+    const container = ( //@ts-ignore
+    h("div", { class: "body-container", ref: el => (this.bodyEl = el), onBeforeMatch: () => { this.beforeMatch(); } }, h("div", { class: "body" }, h("slot", null))));
+    return (h(Host, { class: { active, autoHeight }, id: this.trackerId }, this.styles && h("style", null, this.styles), h("button", { class: { "heading": true, [theme]: true, "mf-listen": true, "focus-status": true }, role: "button", onClick: () => this.toggle(), id: this.trackerId }, h("span", { class: "arrow" }, this.hasArrowSlot ? (h("slot", { name: "arrow" })) : (h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" })))), this.hasHeadingSlot ? (h("slot", { name: "heading" })) : (h(HeadingTag, { class: "heading-text" }, this.heading))), container));
   }
   static get is() { return "ptc-accordion-item"; }
   static get encapsulation() { return "shadow"; }
@@ -150,7 +142,7 @@ export class PtcAccordionItem {
         },
         "attribute": "heading-tag",
         "reflect": false,
-        "defaultValue": "\"h3\""
+        "defaultValue": "'h3'"
       },
       "autoHeight": {
         "type": "boolean",

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

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -60,10 +56,10 @@ ptc-footer {
 
 :host {
   /**
-     @prop --ptc-accordion-item-body-max-height:
-       Inner content max height. This values is also used for CSS animation
-       - default: 100vh
-   */
+    @prop --ptc-accordion-item-body-max-height:
+      Inner content max height. This values is also used for CSS animation
+      - default: 100vh
+  */
   --ptc-accordion-item-body-max-height: 100vh;
 }
 :host .sort-btn-wrap {
@@ -107,8 +103,7 @@ ptc-footer {
 :host .sort-btn-wrap button:first-child {
   margin-right: 8px;
 }
-:host .focus-status button:focus,
-:host .focus-status button:focus-visible {
+:host .focus-status button:focus, :host .focus-status button:focus-visible {
   outline: 5px solid var(--keyboard-nav-outline) !important;
   border-radius: var(--ptc-border-radius-standard) !important;
 }