@ptcwebops/ptcw-design 6.3.37 → 6.3.38

package/dist/collection/components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js

@@ -1,10 +1,16 @@
-import { h } from '@stencil/core';
-import { equalizeHeightsWithinShadow } from '../../../utils/utils';
+import { h } from "@stencil/core";
+import { equalizeHeightsWithinShadow } from "../../../utils/utils";
 class SliderSettings {
 }
 export class HomepageToggledContent {
   constructor() {
-    this.colors = ['hp-blue', 'hp-red', 'hp-gray', 'hp-green', 'hp-orange'];
+    this.colors = [
+      "hp-blue",
+      "hp-red",
+      "hp-gray",
+      "hp-green",
+      "hp-orange",
+    ];
     this.activeTab = 0;
     this.dropdownOpen = false;
     this.tileElements = [];
@@ -20,14 +26,14 @@ export class HomepageToggledContent {
     };
   }
   componentDidLoad() {
-    this.slider = this.el.shadowRoot.querySelector('.card-section');
+    this.slider = this.el.shadowRoot.querySelector(".card-section");
     //this.slider.addEventListener('scroll', () => this.onSliderScroll());
     //window.addEventListener('scroll', () => this.onSliderScroll());
     //this.onSliderScroll();
     //observeInView(this.el, '.card-section', true);
   }
   componentDidRender() {
-    equalizeHeightsWithinShadow('homepage-clickable-tab', this.el);
+    equalizeHeightsWithinShadow("homepage-clickable-tab", this.el);
   }
   handleTabSelected(tabIndex) {
     this.activeTab = tabIndex;
@@ -48,23 +54,29 @@ export class HomepageToggledContent {
     this.tileElements = Array.from(this.el.querySelectorAll(`[slot^="tab-tile-${tabIndex}"]`));
   }
   onSliderScroll() {
-    if (this.slider.scrollLeft === 0 && this.slider.classList.contains('scroll-st')) {
-      this.slider.classList.remove('scroll-st');
+    if (this.slider.scrollLeft === 0 &&
+      this.slider.classList.contains("scroll-st")) {
+      this.slider.classList.remove("scroll-st");
     }
-    else if (this.slider.scrollLeft !== 0 && !this.slider.classList.contains('scroll-st')) {
-      this.slider.classList.add('scroll-st');
+    else if (this.slider.scrollLeft !== 0 &&
+      !this.slider.classList.contains("scroll-st")) {
+      this.slider.classList.add("scroll-st");
     }
-    if (this.slider.scrollLeft === this.slider.scrollWidth - this.slider.offsetWidth && this.slider.classList.contains('scroll-ed')) {
-      this.slider.classList.remove('scroll-ed');
+    if (this.slider.scrollLeft ===
+      this.slider.scrollWidth - this.slider.offsetWidth &&
+      this.slider.classList.contains("scroll-ed")) {
+      this.slider.classList.remove("scroll-ed");
     }
-    else if (this.slider.scrollLeft !== this.slider.scrollWidth - this.slider.offsetWidth && !this.slider.classList.contains('scroll-ed')) {
-      this.slider.classList.add('scroll-ed');
+    else if (this.slider.scrollLeft !==
+      this.slider.scrollWidth - this.slider.offsetWidth &&
+      !this.slider.classList.contains("scroll-ed")) {
+      this.slider.classList.add("scroll-ed");
     }
   }
   onSliderMouseDown(e, slider) {
     e.preventDefault();
     this.sliderSettings.IsMouseDown = true;
-    slider.classList.add('active');
+    slider.classList.add("active");
     this.sliderSettings.StartX = e.pageX - slider.offsetLeft;
     this.sliderSettings.ScrollLeft = slider.scrollLeft;
     this.sliderSettings.PreventAnchor = false;
@@ -76,7 +88,7 @@ export class HomepageToggledContent {
     e.preventDefault();
     clearTimeout(this.sliderSettings.Timeout);
     this.sliderSettings.IsMouseDown = false;
-    slider.classList.remove('active');
+    slider.classList.remove("active");
   }
   onSliderMouseDrag(e, slider) {
     if (this.sliderSettings.IsMouseDown) {
@@ -90,7 +102,7 @@ export class HomepageToggledContent {
     if (e && e.currentTarget) {
       let anch = e.currentTarget;
       if (anch) {
-        anch.classList.add('active');
+        anch.classList.add("active");
       }
     }
   }
@@ -98,7 +110,7 @@ export class HomepageToggledContent {
     if (e && e.currentTarget) {
       let anch = e.currentTarget;
       if (anch) {
-        anch.classList.remove('active');
+        anch.classList.remove("active");
       }
     }
   }
@@ -106,16 +118,25 @@ export class HomepageToggledContent {
     const upArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 8.5L7.34315 2.71178L1.68629 8.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const downArrow = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "11", viewBox: "0 0 15 11", fill: "none" }, h("path", { d: "M13 2.5L7.34315 8.28822L1.68629 2.5", stroke: "white", "stroke-width": "3", "stroke-linecap": "round" })));
     const tabs = this.getTabs();
-    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map(tab => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? 'opened' : ''}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map(tab => (h("div", { class: `dropdown-item ${tab.index === this.activeTab ? 'active-tab' : ''}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? 'active-tab' : ''}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index && this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: e => this.onCardMouseDown(e), onMouseUp: e => this.onCardMouseUp(e), onMouseLeave: e => this.onCardMouseUp(e), onTouchEnd: e => {
+    return (h("div", { class: "wrapper" }, h("div", { class: "header" }, h("h2", null, h("slot", { name: "title" })), h("p", null, h("slot", { name: "description" }))), h("div", { class: "tabs" }, h("div", { class: "tabs-desktop" }, tabs.map((tab) => (h("homepage-clickable-tab", { label: tab.label, active: this.activeTab === tab.index, activeColor: this.colors[tab.index], onClick: () => this.handleTabSelected(tab.index) })))), h("div", { class: "tabs-mobile" }, h("button", { class: `dropdown-button ${this.colors[this.activeTab]} ${this.dropdownOpen ? "opened" : ""}`, onClick: () => this.toggleDropdown() }, tabs[this.activeTab].label, h("span", { class: "arrow" }, this.dropdownOpen ? upArrow : downArrow)), this.dropdownOpen && (h("div", { class: "dropdown-menu" }, tabs.map((tab) => (h("div", { class: `dropdown-item ${tab.index === this.activeTab ? "active-tab" : ""}`, onClick: () => this.handleTabSelected(tab.index) }, h("slot", { name: `tab-label-${tab.index}` })))))))), h("div", { class: "content" }, tabs.map((tab, index) => (h("div", { class: `tab-content ${this.activeTab === index ? "active-tab" : ""}` }, h("slot", { name: `tab-image-${index}` }), h("div", { class: "content-detail" }, h("div", { hidden: true }, tab.label), h("h2", null, h("slot", { name: `tab-title-${index}` })), h("p", null, h("slot", { name: `tab-content-${index}` })), h("slot", { name: `tab-button-${index}` }), this.activeTab === index &&
+      this.tileElements.length > 0 ? (h("div", Object.assign({ class: "info-card-wrapper card-section" }, this.getSliderBindings()), this.tileElements.map((tile, index) => (h("div", { class: `swiper-slide card-link card-link-${index + 1}`, "tab-index": index + 1, key: index, innerHTML: tile.outerHTML, onMouseDown: (e) => this.onCardMouseDown(e), onMouseUp: (e) => this.onCardMouseUp(e), onMouseLeave: (e) => this.onCardMouseUp(e), onTouchEnd: (e) => {
         this.onCardMouseUp(e);
       } }))))) : null)))))));
   }
   getSliderBindings() {
     return {
-      onMouseDown: (e) => { this.onSliderMouseDown(e, this.slider); },
-      onMouseUp: (e) => { this.onSliderMouseExit(e, this.slider); },
-      onMouseLeave: (e) => { this.onSliderMouseExit(e, this.slider); },
-      onMouseMove: (e) => { this.onSliderMouseDrag(e, this.slider); }
+      onMouseDown: (e) => {
+        this.onSliderMouseDown(e, this.slider);
+      },
+      onMouseUp: (e) => {
+        this.onSliderMouseExit(e, this.slider);
+      },
+      onMouseLeave: (e) => {
+        this.onSliderMouseExit(e, this.slider);
+      },
+      onMouseMove: (e) => {
+        this.onSliderMouseDrag(e, this.slider);
+      },
     };
   }
   static get is() { return "homepage-toggled-content"; }

package/dist/collection/components/organism-bundles/most-popular-news/most-popular-news.css

@@ -9,8 +9,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -29,8 +31,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -82,7 +86,7 @@ ptc-link, ptc-square-card,
 
 .most-popular-card ptc-card-wrapper {
   border-radius: 4px;
-  background: #FFF;
+  background: #fff;
   box-shadow: var(--ptc-shadow-x-small);
 }
 .most-popular-card ptc-card-wrapper:hover {

package/dist/collection/components/organism-bundles/most-popular-news/most-popular-news.js

@@ -1,14 +1,14 @@
-import { Host, h } from '@stencil/core';
-import { equalizeHeightsWithinShadow } from '../../../utils/utils';
-import numberOneSvg from '../../../media/svg-imgs/NumberOneGreenBadge.svg';
-import numberTwoSvg from '../../../media/svg-imgs/NumberTwoGreenBadge.svg';
-import numberThreeSvg from '../../../media/svg-imgs/NumberThreeGreenBadge.svg';
+import { Host, h } from "@stencil/core";
+import { equalizeHeightsWithinShadow } from "../../../utils/utils";
+import numberOneSvg from "../../../media/svg-imgs/NumberOneGreenBadge.svg";
+import numberTwoSvg from "../../../media/svg-imgs/NumberTwoGreenBadge.svg";
+import numberThreeSvg from "../../../media/svg-imgs/NumberThreeGreenBadge.svg";
 export class MostPopularNews {
   constructor() {
     this.topTitle = undefined;
   }
   componentDidRender() {
-    equalizeHeightsWithinShadow('.js-card-bottom', this.el);
+    equalizeHeightsWithinShadow(".js-card-bottom", this.el);
   }
   render() {
     return (h(Host, null, h("div", { class: "most-popular-wrapper" }, h("slot", { name: "seo-content" }), h("ptc-title", { type: "h2", "text-align": "center", "title-size": "large", "title-color": "white", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", class: "most-popular-title" }, this.topTitle), h("div", { class: "most-popular-cards" }, h("div", { class: "most-popular-card" }, h("ptc-card-wrapper", { id: "most-popular-1", tabindex: "0", "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card mf-listen" }, h("ptc-badge", { type: "svg", "svg-code": numberOneSvg }), h("ptc-card-content", { tabindex: "-1" }, h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom", tabindex: "-1" }, h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, h("p", null, "PTC Q2 FY\u201923 Earnings Presentation"))))), h("div", { class: "most-popular-card" }, h("ptc-card-wrapper", { id: "most-popular-2", "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, h("ptc-badge", { type: "svg", "svg-code": numberTwoSvg }), h("ptc-card-content", null, h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, h("p", null, "PTC Announces Availability of Creo 9"))))), h("div", { class: "most-popular-card" }, h("ptc-card-wrapper", { id: "most-popular-3", "card-type": "most-popular", "card-link": "https://www.ptc.com/", "is-loading": "false", "link-target": "_blank", "link-title": "Link title on hover", class: "most-pupular-card" }, h("ptc-badge", { type: "svg", "svg-code": numberThreeSvg }), h("ptc-card-content", null, h("ptc-picture", { alt: "image-test", "is-full-height": true, "is-full-width": true, src: "https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data" })), h("ptc-card-bottom", { "card-type": "most-popular", class: "js-card-bottom" }, h("ptc-para", { "para-line-h": "--ptc-line-height-denser", "font-size": "x-small", "font-weight": "w-7", "para-color": "primary-grey", "para-margin": "margin-top-3", "seo-compatibility-mode": true }, h("p", null, "PTC Completes Acquisition of Intland Software")))))))));

package/dist/collection/components/organism-bundles/news-search-result/news-search-result.css

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

package/dist/collection/components/organism-bundles/news-search-result/news-search-result.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class NewsSearchResult {
   constructor() {
     this.isLoading = true;

package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.css

@@ -708,8 +708,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -728,8 +730,10 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link, ptc-square-card,
-.hyphenate-text, ptc-footer {
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -1052,12 +1056,12 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   width: 161px;
   height: 8px;
   border-radius: 999px;
-  background: #E4E7E9;
+  background: #e4e7e9;
 }
 .ptc-icon-card-slider-wrapper .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {
   height: 8px;
   border-radius: 999px;
-  background: #323B42;
+  background: #323b42;
   transform: translateX(-16px);
 }
 .ptc-icon-card-slider-wrapper .swiper-button-prev:after,

package/dist/collection/components/organism-bundles/ptc-icon-card-slider-example/ptc-icon-card-slider-example.js

@@ -1,12 +1,12 @@
-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 PtcIconCardSliderExample {
   componentDidLoad() {
     setTimeout(() => {
-      let list = this.el.querySelector('.ptc-icon-slider-cards');
+      let list = this.el.querySelector(".ptc-icon-slider-cards");
       this.listSwp = new Swiper(list, {
         modules: [Navigation, Pagination, Scrollbar, Mousewheel],
-        slidesPerView: 'auto',
+        slidesPerView: "auto",
         spaceBetween: 24,
         centeredSlidesBounds: true,
         initialSlide: 0,
@@ -50,7 +50,7 @@ export class PtcIconCardSliderExample {
     }, 100);
   }
   render() {
-    return (h(Host, null, h("div", { class: "ptc-icon-slider-cards swiper-container" }, 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: "ptc-icon-slider-cards swiper-container" }, 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 "ptc-icon-card-slider-example"; }
   static get originalStyleUrls() {

package/dist/collection/components/organism-bundles/sequential-bundle/sequential-bundle.css

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

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

@@ -1,6 +1,6 @@
-import { h, Host } from '@stencil/core';
-import Swiper from 'swiper';
-import 'swiper/swiper-bundle.css';
+import { h, Host } from "@stencil/core";
+import Swiper from "swiper";
+import "swiper/swiper-bundle.css";
 export class SequentialBundle {
   constructor() {
     this.isMobile = undefined;
@@ -15,7 +15,7 @@ export class SequentialBundle {
     this.initSlider();
   }
   render() {
-    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container", ref: el => this.swiperContainerRef = el }, 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-pagination" }))) : (h("div", null, "test")
+    return (h(Host, null, this.isMobile ? (h("div", { class: "swiper-container", ref: (el) => (this.swiperContainerRef = el) }, 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-pagination" }))) : (h("div", null, "test")
     // <div class="accordion-container desktop-container">
     //   <div class="accordion">
     //     <div class="accordion-item">

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

@@ -1,11 +1,17 @@
-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;
   }
@@ -16,7 +22,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",
@@ -25,14 +31,14 @@ export class SequentialBundleExample {
             initialSlide: 1,
             loop: true,
             pagination: {
-              el: '.swiper-pagination',
-              type: 'bullets',
+              el: ".swiper-pagination",
+              type: "bullets",
             },
             breakpoints: {
               768: {
                 slidesPerView: 2,
               },
-            }
+            },
           });
         }
         else {
@@ -64,20 +70,19 @@ 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,
@@ -88,8 +93,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}` }))),
     ])));
@@ -125,7 +130,7 @@ export class SequentialBundleExample {
           "tags": [],
           "text": ""
         },
-        "defaultValue": "[true, false, false, false, false]"
+        "defaultValue": "[\r\n\t\ttrue,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t\tfalse,\r\n\t]"
       }
     };
   }

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() {